详解Vue中AXIOS的封装

下面我将详细讲解Vue中AXIOS的封装的完整攻略。

什么是AXIOS

AXIOS是一个基于promise的HTTP客户端，它可以用在浏览器和Node.js中，它最大的优点就是支持浏览器和Node.js的异步操作。

AXIOS的封装

在Vue中，我们通过封装AXIOS来发送HTTP请求。这样的好处是可以减少重复代码，在API接口调用的时候只需要关心传参和接口返回的数据即可，不需要过多的关心请求的具体实现方式。下面我们来看一个简单的场景：

假设现在要调用一个获取用户信息的接口：

接口地址： /api/user/info
请求方式： GET
请求参数：{
    userId: xxx
}
返回数据：{
    name: 'xiaoming',
    age: 18
}

下面将通过两个示例来讲解AXIOS的封装：

示例1：简单封装

我们可以新建一个request.js文件，对AXIOS进行封装：

import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

service.interceptors.request.use(
  config => {
    /* token鉴权 */
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 200) {
      /* error提示 */
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res.data
    }
  },
  error => {
    /* error提示 */
    return Promise.reject(error)
  }
)

export default service

在这个示例中，我们新建了一个service实例，设置了一些默认选项，如请求的基础URL和请求超时时间。

我们将请求拦截器和响应拦截器添加到AXIOS中，请求拦截器中可以实现对请求的预处理，比如在请求头中添加Token等处理；响应拦截器中可以生成统一的返回数据，对返回的数据进行过滤和Promise处理。

这里我们只是简单的实现了拦截器，需要鉴权的话可以在请求拦截器中处理，错误提示信息可以在响应拦截器中处理。

接下来我们在API接口中使用service即可：

import service from '请求的路径'

const getInfo = (userId) => {
  return service({
    url: '/api/user/info',
    method: 'get',
    params: {
      userId
    }
  })
}
export {
  getInfo
}

我们在API接口中，通过引入service来使用请求，再通过getInfo这个方法进行调用，传入参数即可。这个请求是基于Promise来实现的，所以我们可以通过.then或者.catch方法对请求进行处理。

示例2：进阶封装

上面的简单示例，虽然实现了基础的请求封装，但不能完全满足需求，有很多可优化的地方。

在进阶封装中，我们将在拦截器中添加更多的处理逻辑，比如请求头中添加Token、添加loading动画、错误处理。

import axios from 'axios'

/* 定义请求常量 */
const TIME_OUT = 5000;    // 请求超时时间
const ERR_OK = 200;       // 请求成功返回状态码
const ERR_NO_AUTH = 401;  // 未授权状态码
const ERR_FORBIDDEN = 403; // 禁止访问状态码
const ERR_NOT_FOUND = 404; // 指定访问地址不存在
const ERR_SERVER = 500;   // 服务器错误状态码
const ERR_BAD_GATEWAY = 502; // 网关错误状态码

/* 创建axios实例 */
let instance = axios.create({
    baseURL: process.env.VUE_APP_BASE_API, //根据环境设置 base_url
    timeout: TIME_OUT
});

/* 请求拦截器 */
instance.interceptors.request.use(config => {
    /* 添加请求头 */
    config.headers['Authorization'] = `Bearer ${getToken()}`; // 获取token
    /* 添加 loading 动画 */
    store.commit(SET_LOADING_STATUS, true);
    return config;
}, error => {
    return Promise.reject(error);
})

/* 响应拦截器 */
instance.interceptors.response.use(response => {
    store.commit(SET_LOADING_STATUS, false); //隐藏 loading 动画
    if(response.status === ERR_OK) {// 成功请求到数据
        if(response.data.code === ERR_OK) {//业务成功状态码
            return Promise.resolve(response.data)
        } else {// 业务失败状态码
            Message.error(response.data.message);
            return Promise.reject(response.data.message);
        }
    } else {// 请求状态错误
        Message.error('请求错误，请稍后再试');
        return Promise.reject(new Error('请求错误，请稍后再试'))
    }
}, error => { // 处理服务器响应流程错误 可根据需求自行调整
    store.commit(SET_LOADING_STATUS, false); // 隐藏 loading 动画
    const checkStatus = response => {
        store.commit(SET_LOADING_STATUS, false); // 隐藏 loading 动画
        /* 当响应异常时，提示并重定向 */
          switch (response.status) {
            case ERR_NO_AUTH:
              Message.error('你没有该权限，请联系管理员');
              break
            case ERR_FORBIDDEN:
              Message.error('登录失效，请重新登录');
              break
            case ERR_NOT_FOUND:
              Message.error('接口地址错误');
              break
            case ERR_SERVER:
              Message.error('服务器错误');
              break
            case ERR_BAD_GATEWAY:
              Message.error('服务器网关错误');
              break
            default:
              Message.error('未知错误');
        }
    }
    if(error.toString().indexOf('timeout') !== -1) { // 超时错误
        Message.error('请求超时，请稍后再试');
        return Promise.reject(new Error('请求超时，请稍后再试'))
    }
    const { response } = error;
    if(response) { // 处理异常状态码
        checkStatus(response);
        const { status, statusText } = response;
        return Promise.reject(new Error(`服务器${status}：${statusText}`));
    } else { // 处理断网
        Message.error('网络已断开');
        return Promise.reject(new Error('网络已断开'));
    }
});

在这个示例中，我们定义了一些请求的常量，包括请求超时时间和HTTP状态码，创建了instance实例，对其拦截器进行了完善的处理，包括请求头的处理、loading动画开启、错误处理。其中，通过store来管理loading动画状态，通过自定义Message来实现错误提示。

这样优化后的AXIOS实例可以更好的迁移至其他项目和解决较多复杂场景的请求需求。

我们仍然可以通过API接口使用并调用，在第一个示例中有详细的使用方式。

总结

AXIOS的封装可以大大减少项目中的重复代码，使得维护和迭代变得更加快捷。在拦截器中，我们可以对请求和响应进行更加详细的处理，比如Token鉴权、错误处理、loading动画等。上述的两个示例都是基于Vue和AXIOS的应用，实现了对AXIOS的简单封装和进阶封装。