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的请求拦截器

注意，本文已迁移

本文具体内容已迁移到新网页，请读者移步查看，后续所有文章更新也将在新网站：
axios完整二次封装及使用

使用

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

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

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拦截器模式简单实现