vue中axios的二次封装实例讲解

这里详细讲解一下vue中axios的二次封装实例。

什么是axios？

axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 node.js。axios 本身提供了更加简单易用的 API，能够一次性设置多余其他请求的默认值，同时也支持拦截器的使用。

为什么需要二次封装axios？

二次封装 axios 的主要原因在于：

1. 业务中对请求响应进行统一处理，例如对错误响应的统一处理或者对成功响应的统一处理。这种情况下，我们可以通过封装 axios 来实现对响应的统一处理。
2. 简化业务中的调用方式。当某个接口调用频率比较高时，如果每次都需要手动拼装请求参数，很容易出现疏漏，甚至浪费大量时间。这时候，我们可以通过封装 axios 来简化调用方式。

如何进行二次封装？

首先在 src 目录下新建一个 api 文件夹，用于存放项目中所有的接口。在这个文件夹下，我们新建一个 index.js 文件，用于封装 axios。

在 index.js 文件中，我们可以先进行 axios 的一些默认值设置和拦截器的设置：

import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:8080/api';
axios.defaults.timeout = 10000;

// 添加请求拦截器
axios.interceptors.request.use(
  (config) => {
    // 在请求发送之前做一些处理
    let token = sessionStorage.getItem('token');
    if (token) {
      config.headers.Authorization = token;
    }
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
axios.interceptors.response.use(
  (response) => {
    // 对响应数据做处理
    return response.data;
  },
  (error) => {
    // 对响应错误做处理
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 未登录，跳转登录页
          router.replace({
            path: 'login',
            query: { redirect: router.currentRoute.fullPath }
          });
          break;
        case 500:
          // 服务器错误
          Message.error('服务器出错了，请稍后重试！');
          break;
      }
    }
    return Promise.reject(error);
  }
);

export default axios;

可以看到，在上面的代码中，我们设置了 axios 的默认 baseURL 和 timeout。同时，我们还添加了请求拦截器和响应拦截器。请求拦截器用于在发送请求之前做一些处理，例如在请求头中添加权限认证信息；响应拦截器用于在接收到响应数据后做一些处理，例如对响应数据进行格式化。

接下来，我们可以在 api 文件夹下新建一个 user.js 文件，用于封装用户相关的接口。在这个文件中，我们可以导入刚刚封装的 axios：

import axios from './index';

const userApi = {
  login(data) {
    return axios.post('/login', data);
  },
  logout() {
    return axios.post('/logout');
  }
};

export default userApi;

可以看到，在 user.js 文件中，我们直接使用了封装好的axios发送了一个 post 请求，并将请求结果直接返回。

至此，我们就完成了一次axios的二次封装，当我们在业务中需要请求某个接口时，只需要在对应的api文件中调用对应的方法即可，比如：

import userApi from '@/api/user';

export default {
  login() {
    userApi.login({
      username: 'admin',
      password: '123456'
    }).then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    });
  },
};

示例说明

示例一

例如，我们需要在发送请求时对 URL 进行拼接，可以在请求拦截器中进行处理：

axios.interceptors.request.use(
  (config) => {
    // 在请求发送之前做一些处理
    let token = sessionStorage.getItem('token');
    if (token) {
      config.headers.Authorization = token;
    }
    // 对 URL 进行拼接
    config.url = config.baseURL + '/' + config.url;
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

示例二

我们需要在成功响应后统一对响应结果进行处理，比如，某个接口每次调用时，都需要将返回结果中的时间戳转换成日期，并将转换后的日期格式化：

axios.interceptors.response.use(
  (response) => {
    // 对响应数据做处理
    let dateFilter = function (time) {
      let format = 'YYYY-MM-DD hh:mm:ss';
      let date = new Date(parseInt(time));
      let o = {
        'M+': date.getMonth() + 1,
        'D+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      };
      format = format.replace(/y{4}/i, date.getFullYear()).replace(/y{2}/i, date.getFullYear() % 100).replace(/(M+|D+|h+|m+|s+)/g, (match) => {
        let value = o[match];
        return value < 10 ? '0' + value : value;
      });
      return format;
    };
    response.data.forEach(item => {
        item.time = dateFilter(item.time);
    });
    return response.data;
  },
  (error) => {
    // 对响应错误做处理
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 未登录，跳转登录页
          router.replace({
            path: 'login',
            query: { redirect: router.currentRoute.fullPath }
          });
          break;
        case 500:
          // 服务器错误
          Message.error('服务器出错了，请稍后重试！');
          break;
      }
    }
    return Promise.reject(error);
  }
);

在上述代码中，我们将 axios 自带的 response.data 转换成一个数组进行处理，然后按照业务需要格式化了接口返回的时间戳。