vue.js 如何将请求采用axios进行统一封装

首先，目录结构如图：

image.png

第一步，安装axios： npm install axios --save
第二步，创建config.js、index.js、interface.js等文件
第三步，需要将mian.js中加入如下代码：

import api from './http/index'
Vue.use(api)

axios.js：二次封装axios模块，包含拦截器等信息；

config.js：axios默认配置，包含基础路径等信息；

index.js：将axios封装成插件，按插件方式引入；

interface.js：请求接口汇总模块，聚合模块API；

modules下存放模块下的请求，下面以LoginManage.js为例；

config.js的代码如下：

export default {
    method: 'post',
    // 请求头信息
    headers: {
      'Content-Type': 'application/json'
    },
    // 参数
    data: {},
    // 设置超时时间
    timeout: 3000000,
    // 携带凭证
    withCredentials: true,
    // 返回数据类型
    responseType: 'json'
  }

interface.js代码如下：

/* 
 * 用户授权接口集合
 */
import * as PermissionManage from './modules/UserPermissionManage/PermissionManage'
import * as RoleManage from './modules/UserPermissionManage/RoleManage'
import * as UserManage from './modules/UserPermissionManage/UserManage'
import * as LoginManage from './modules/UserPermissionManage/LoginManage'
// 默认全部导出
export default {
    PermissionManage,
    RoleManage,
    UserManage,
    LoginManage,
}

index.js代码如下：

// 导入所有接口
import apis from './interface'

const install = Vue => {
    if (install.installed)
        return;
    install.installed = true;
    Object.defineProperties(Vue.prototype, {    
        // 注意，此处挂载在 Vue 原型的 $api 对象上
        $api: {
            get() {
                return apis
            }
        }
    })
}

export default install

axios.js代码如下：(根据自己的需要参考即可)

import axios from 'axios';
import config from './config';
import router from '@/router';
import Vue from 'vue';
export default function $axios(options) {
  return new Promise(
    (resolve, reject) => { 
      const instance = axios.create({
        baseURL: Vue.prototype.BASE_URL,
        headers: options.config==undefined?config.headers:options.config,
        timeout: config.timeout,
        withCredentials: config.withCredentials
      })
    //添加请求拦截器
    instance.interceptors.request.use(
      config => {
        let token = sessionStorage.getItem('token');
        // 根据请求方法，序列化传来的参数，根据后端需求是否序列化
        if (config.method == 'post') {
          config.data=config.params
          config.params=''
        }
        if(config.url.split("/")[0]=='api'||config.url.split("/")[1]=='isTelValid'||config.url.split("/")[1]=='getPhotoValidCode'||config.url.split("/")[1]=='sendMessage'){//不需要验证token
          //某些不需要登录也可以访问的方法，不需要axios拦截。
          console.log("此方法token不校验，axios不拦截！")
          return config;
        }else{         
          if (token) {
            config.headers.token = token
          } else {
            //清空sessionStorage、store
            // 重定向到登录页面
            router.push('/login')
          }
        }    
        return config
      },
      error => {
        // 请求错误时
        console.log('request:', error)
        // 1. 判断请求超时
        if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
          alert('timeout请求超时')
          // 重定向到登录页面
          router.push('/login')
          // return service.request(originalRequest);// 再重复请求一次
        }
        // 2. 需要重定向到错误页面
        const errorInfo = error.response
        console.log(errorInfo)
        if (errorInfo) {
          error = errorInfo.data  // 页面那边catch的时候就能拿到详细的错误信息,看最下边的Promise.reject
          const errorStatus = errorInfo.status; // 404 403 500 ...
          router.push({
            path:'/404'
          })
        }
        return Promise.reject(error) // 在调用的那边可以拿到(catch)你想返回的错误信息
      }
    )

  //  添加响应拦截器
    instance.interceptors.response.use(
      response => {
        let data;
        let url=response.config.url.split("/");
        let len=url.length;
        // IE9时response.data是undefined，因此需要使用response.request.responseText(Stringify后的字符串)
        if (response.data == undefined) {
          data = JSON.parse(response.request.responseText)
        }else if(url[len-1]=='downloadLicenseFile'||url[len-1]=='downloadPrintFile'||url[len-1]=='getPhotoValidCode'||url[len-1]=='exportFile'){//返回为文件流、图片流
          data=response
        } else {
          data = response.data
        }
 // 根据返回的code值来做不同的处理
        switch (data.result) {
          case 2:
            sessionStorage.clear();
            router.push('/login');
            break;
          case 1:
            console.log(data.msg)
            break;
          case 0:
            console.log(data.msg)
            break;
          default:           
        }
        return data
      },
      err => {
        if (err && err.response) {
          switch (err.response.status) {
            case 400:
              err.message = '请求错误'
              break
            case 401:
              err.message = '未授权，请登录'
              break
            case 403:
              err.message = '拒绝访问'
              break
            case 404:
              err.message = `请求地址出错: ${err.response.config.url}`
              break
            case 408:
              err.message = '请求超时'
              break
            case 500:
              err.message = '服务器内部错误'
              break
           case 501:
              err.message = '服务未实现'
              break
            case 502:
              err.message = '网关错误'
              break
            case 503:
              err.message = '服务不可用'
              break
            case 504:
              err.message = '网关超时'
              break
            case 505:
              err.message = 'HTTP版本不受支持'
              break
            default:
          }
        }
       return Promise.reject(err) // 返回接口返回的错误信息
      }
    )

    // 请求处理
    instance(options).then(res => {
      resolve(res)
      return false
    }).catch(error => {
      reject(error)
    })
  })
}

LoginManage.js的代码：

import axios from '../../axios'
/* 
 * 用户登录模块
 */

// 检查是否开启手机验证
export const checkIsTelVerify = (params) => {
    return axios({
        url: 'loginInfo/isTelValid',
        method: 'post',
        params
    })
}

// 获取图片验证码
export const getPhotoValidCode = (params) => {
    return axios({
        url: 'loginInfo/getPhotoValidCode',
        responseType: "arraybuffer",
        method: 'post',
        params
    })
}

我们在Vue页面就可以通过如下代码调用方法（以此为例）

//检查用户是否开启手机验证
var isOpenTelValide=(rule,value,callback) =>{
      //检查用户是否开启手机验证
      let params={
        "data":{
        "userCode":value
        }
      }
      this.$api.LoginManage.checkIsTelVerify(params).then((res)=>{
        if(res.result==0){
          if(res.data.isValid==0){
            this.isOpen=false;
          }else if(res.data.isValid==1){
            this.isOpen=true;//用户开启了手机验证
          }
        }
      })
    };