Axios二次封装

什么是Axios？

What? 还有这种问题？好吧，那就随口一说。
Axios是基于promise的HTTP库，用于发起请求、拦截请求和响应、转换请求和响应，等等。

为什么要封装？

这还用说，当然是为了方便啦。
首先就是复用性高，维护起来更方便；其次能够统一进行错误处理，例如http错误；还有就是能够拦截数据，对数据进行统一的格式化，例如发送请求前加上token。

安装

npm install axios

封装

封装思路

我将封装分为了以下几个步骤，后面会逐一介绍：

1. 引入axios
2. 创建axios实例
3. 请求拦截处理
4. 响应拦截处理
5. 统一错误处理
6. 抛出实例

封装过程

1. 引入axios
   创建一个新的目录，如http、service等。新建一个request.js文件。引入axios, import axios from "axios";

2. 创建实例

  const service = axios.create({
    baseURL: "/api", // url = base url + request url
    timeout: 1000 * 60 // 设置请求超时时间，单位ms
  });

3. 请求拦截

  service.interceptors.request.use(
    config => {
      // config中可以通过在custom中传入自定义参数。
      if (config.custom.isLoading) {
        // 加载中动画
        // 此处为封装的element-ui的loading
        loading.startLoading();
      }
      // 添加token
      if (config.custom.isNeedToken) {
        config.headers.Authorization = 'xxx';
      }
      return config;
    },
    // 统一错误处理函数
    errorHandle
  );

4. 响应拦截

  service.interceptors.response.use(
    async response => {
      let { config } = response;
      // 取消loading状态
      if (config.custom.isLoading) {
        loading.endLoading();
      }
      // token过期 执行清除个人信息、跳转登录等操作
      if (response.data.code === 401) {
        location.href = '/login'
        clearUserInfo()
      }
      // 这里也可以做其他的数据处理

      // 根据实际情况返回数据
      if (response.status == 200 && response.data.code == 200) {
        return Promise.resolve(response.data);
      } else {
        Message.error(response.data.message || "网络超时");
        return Promise.reject(response);
      }
    },
    // 统一错误处理函数
    errorHandle
  );

5. 统一错误处理

  const errHandler = (error) => {
    // 取消loading状态
    if (config.custom.isLoading) {
      loading.endLoading();
    }
    // 判断http状态码
    if (error.status === 401) {
      // 用户信息不对 执行清除个人信息、跳转登录等操作
      location.href = '/login'
      clearUserInfo()
    }
    // 弹出提示框等操作
    notification({
      title: '错误',
      message: error.message || '未知错误',
      type: 'error',
      showClose: false,
    })
    // 抛出异常
    return Promise.reject(error)
  }

6. 抛出实例

  function get(url, data, config) {
    return service({
      method: "get",
      url,
      params: data,
      ...config
    });
  }
  function post(url, data, config) {
    return service({
      method: "post",
      url,
      data,
      ...config
    });
  }
  function delete(url, data, config) {
    return service({
      method: "delete",
      url,
      params: data,
      ...config
    });
  }
  function put(url, data, config) {
    return service({
      method: "put",
      url,
      data,
      ...config
    });
  }
  export default {
    get,
    post,
    put,
    delete
  }

使用

新建一个api文件夹，添加login.js文件。

  import request from '../service/request';
  // 举get 和post的例子。delete同get，put同post
  export const login = (userLoginInfo) => request.post('/login', userLoginInfo, { custom: { isLoading: true } })
  export const userInfo = () => request.get('/getUserInfo', {}, { custom: { isNeedToken: true } })

结束语

以上就是一个简单的axios封装，也可以根据自己的需求来自定义一些内容。有遇到过需要封装取消请求的，但不是很常见，就没有写进去。