axios完整二次封装及使用

在前端项目中网络请求的封装必不可少，最近重构了下项目axios的封装故进行记录

axios二次封装

import axios from "axios";
import router from "../router"; //看具体项目封装的路由文件修改

//跳转登陆页面
const toLogin = () => {
  router.replace({
    path: "/login"
  });
};

//封装状态码错误处理函数
const errorHandle = status => {
  switch (status) {
    //登录不成功时跳转到登录页面
    case 401:
      console.log("认证失败,未登录或无权限");
      toLogin();
      break;
    case 403:
      //token过期了,清除token存储
      localStorage.removeItem("token");
      console.log("token校验失败");
      toLogin();
      break;
    case 404:
      console.log("请求的资源不存在");
      break;
    default:
      console.log("请求出错,状态码为:" + status);
      break;
  }
};


// axios二次封装
const devBaseURL = "在开发环境下接口的baseURL";
const proBaseURL = "在生产环境下接口的baseURL";
//在vue的config文件夹下可以看开发环境和生产环境的名称,通常为development和production
const baseURL = process.env.NODE_ENV === 'development' ? devBaseURL: proBaseURL;

//创建axios实例
const service = axios.create({
  baseURL: baseUrl,
  // 配置超时时间
  timeout: 2000
});
//设置post请求的 Content-Type，需不需要写看后台规范
service.defaults.headers.post["Content-Type"] ="application/x-www-form-urlencoded";
//允许跨域传递cookie带上凭证，看具体项目，通常要设为true
service.defaults.withCredentials = true;

//ES6解构赋值，引入cancelToken和isCancel 
const { CancelToken, isCancel } = axios;

//定义一个全局的变量存储不同的url,避免同一页面有多个请求时拦截了正常的请求
  let pending = {};


// 设置axios的请求拦截器
service.interceptors.request.use(config => {
  //获取本地存储中的token,若有token则加到请求中去，token一般存储到本地或者vuex
  let token = localStorage.getItem("token");
  token && (config.headers.Authorization = token);
  
  //取消重复请求
  //用每个请求的url当作唯一标识的key值取消重复请求
 let key = config.url + "&" + config.method;
 //若上一个请求已存在则调用函数取消上一次的重复请求
 if (pending[key]) pending[key]("取消了重复请求");
 config.cancelToken = new CancelToken((c) => {
 // 将取消请求的函数c赋值给pending[key]保存取消函数
  pending[key] = c;
 });
  //记得要返回config才可进行接下来的请求
  return config;
});


//设置axios的响应拦截器
service.interceptors.response.use(
  response => {
    //成功则返回response里有用的data
    return response.data
  },
  //失败则进行统一的错误处理
  error => {
    let { response } = error;
    //判断是否为重复请求而出错
    if (isCancel(error)) console.log("请求失败,原因是" + error.message);
    else if (response) {
      errorHandle(response.status);
    }
    //判断客户端有无联网
    if (!window.navigator.onLine) {
      //断网处理：跳转断网页面/提示网络错误等等
      alert("请检查网络是否连接");
    }
    //出错中断promise链
    return new Promise(() => {});
  }
);

//导出封装的aixos
export default service;

使用

在接口管理文件中引入封装的service，在这里我仍起名为axios：
import axios from '封装的service所在路径';
在接口管理文件中进行api请求，接口数多时注意写好每个接口的功能方便后续调用：

//1.登录
export const login = data => axios.post("/user/login", data)//路径根据后台给的接口文档填写
// 2. 修改密码
export const updatePwd = data => axios.put("/user/password", data)

在页面中使用：
用import导入要用的接口，

import {login, updatePwd } from "@/api/index";
login().then(res=>console.log(res))

axios拦截器原理

当我们使用 Axios实例发送请求时get、post等方法实际都是调用的Axios.prototype.request方法，最终返回的是promise链式调用，实际请求是在dispatchRequest中发生的。

使用拦截器时axios调用request会创建一个chain数组（chain=[dispatchReauest,undefined],undefined只起占位作用，因为后续chain执行每次会取两个数）把请求拦截器放在dispatchReauest前面，响应拦截器放在undifined后面，然后按顺序遍历执行chain，每次取出两个数，一个是拦截器成功的函数一个是失败的函数对应传入promise成功的回调和失败的回调中，保证了请求拦截器——api请求——响应拦截器的执行顺序

注意：请求拦截器后设置的先执行，响应拦截器先设置的先执行

使用原生AJAX实现拦截器：Ajax拦截器的实现

参考资料

学习 axios 源码整体架构，打造属于自己的请求库
axios拦截器模式简单实现