vue之axios篇 拦截器

axios里面可以设置拦截器 ，可以在我们正式请求发送之前做一些事情
拦截器分请求（request）拦截器和响应（response）拦截器

最近在项目开发中，前后端交互时，经常会使用到token

在进行敏感操作之前，每个请求需要携带token，但是token 有有效期，token 失效后需要换取新的token并继续请求。

需求分析

首次请求后台把token返回给前端，前端把这个token可以保存起来， 然后每次请求后端都需要带上这个token 进行鉴权验证
如果我们每次请求都在路径后面加上http://abc.com/list?token=xxxx 这种形式
如果请求特别多的话 每次都在后面写上token=xxx这种太麻烦
这时候就可以用 axios request 拦截器，给每个请求都加 token，这样就可以节省每个请求再一次次的复制粘贴代码。

token 失效问题，当我们token 失效，我们服务端会返回一个特定的错误表示，比如 token invalid，但是我们不能在每个请求之后去做刷新 token 的操作呀，所以这里我们就用 axios response 拦截器，我们统一处理所有请求成功之后响应过来的数据，然后对特殊数据进行处理，其他的正常分发。

具体实现

1. 下载安装axios:
   npm i axios/npm install axios
2. 引入（在哪里使用就在哪里引入）
   import axios from 'axios'
3. 封装request.js（位置：utils/request.js）代码如下：

import axios from "axios";
import {Notification, MessageBox, Message} from 'element-ui';
import errorCode from '@/utils/errorCode';

axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
// 创建axios实例 axios.create([config])
const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL:
    process.env.NODE_ENV === "production" //正式生产环境，程序最终发布后所需要的参数配置
      ? process.env.VUE_APP_BASE_URI
      : process.env.VUE_APP_BASE_API,
  // 超时
  timeout: 30000
});
// request拦截器
service.interceptors.request.use(
  config => {
    // 是否需要设置 token
    config.headers["token"] =sessionStorage.getItem('toKenValue'); // 让每个请求携带自定义token 请根据实际情况自行修改
    return config;
  },
  error => {
    console.log(error);
    Promise.reject(error);
  }
);

// 响应拦截器
axios.interceptors.response.use(
  res => {
    // 未设置状态码则默认成功状态
    const code = res.data.code || 200;
    // 获取错误信息
    const msg = errorCode[code] || res.data.message || errorCode['default'];
    if (code === 403) {
      MessageBox.confirm('登录状态已过期，请重新登录', '系统提示', {
        confirmButtonText: '重新登录',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        // 跳转登录页
        sessionStorage.removeItem('toKenValue');
        router.push(
          '/login',
          () => {},
          e => {}
        );
        return false;
      });
    } else if (code === 500) {
      Message({
        message: msg,
        type: 'error',
      });
      return Promise.reject(new Error(msg));
    } else if (code !== 200) {
      Notification.error({
        title: msg,
      });
      return Promise.reject('error');
    } else {
      return res.data;
    }
  },
  error => {
    console.log('err' + error);
    let {message} = error;
    if (message == 'Network Error') {
      message = '后端接口连接异常';
    } else if (message.includes('timeout')) {
      message = '系统接口请求超时';
    } else if (message.includes('Request failed with status code')) {
      message = '系统接口' + message.substr(message.length - 3) + '异常';
    }
    Message({
      message: message,
      type: 'error',
      duration: 5 * 1000,
    });
    return Promise.reject(error);
  }
);
export default service;

哪里可以配置axios呢

• axios全局配置

//如果create()里不添加参数的话，在创建这个axios实例的时候，使用的就是全局的配置
//axios.defaults.后边跟的就是axios的那些配置
//一般修改的全局配置，也就下边这两个
axios.defaults.withCredentials = true;
axios.defaults.timeout = 10000;
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';

• axios实例配置

//如果设置了全局的配置，但是又想在创建的实例里修改
const service = axios.create({
  timeout: 30000
})

• axios请求配置

//如果设置了全局的配置，但是又想在创建的实例里修改
 let instance = axios.create();
    instance.get('/data.json',{
        timeout:5000
    })

-这3种配置方法的优先级是 axios请求配置> axios实例配置 > axios全局配置

问：timeout的作用
答：timeout 超时时长 默认是1秒，超时时长的意思是，发起请求的时候，服务端长时间没有返回数据，接口就会报超时401具体的超时时长一般是由后端定义的，比如当前端请求了一个比较大的数据，后端需要进行处理，一旦处理时间过长，比如超过1秒那么后端可能就直接返回401，告诉前端接口超时了，这个时候其实前端也需要做响应的处理

问：axios创建实例作用是啥，为啥要创建一个实例
答：可以不创建一个axios实例，默认会导出实例axios，通常你只需使用这个axios就可以了。
但是有时候你需要创建多个实例，比如你需要访问多个服务地址，而这些服务请求和响应的结构都完全不同，那么你可以通过axios.create创建不同的实例来处理。
比如axios1是用http状态码确定响应是否正常，而axios2是服务器自己定义的状态码，又或者他们请求头不同，支持的content-type不同，那么我可以单独为axios1和axios2写拦截器。