axios 拦截器(解决每次请求header token等刷新问题)

为什么要用拦截器以及作用？

说白了就是，在调用http前要干点什么 和在接受到http返回后要干点什么

调用前要干点什么？刷新token，传递设备编号等

调用后要干点什么？例如结果日志的保存？接口结果的缓存等

官网说明 https://www.axios-http.cn/docs/interceptors

例如我有个自定义封装的axios文件

import myAxios from 'axios';  //这里应该写import axios from 'axios' 的，别介意 哈哈;
// axios网络请求封装请求开始
import { Cookies } from 'quasar';
import process from 'process';
let axios = null;

 // 为什么调用前的代码 不写在这里？
  axios = myAxios.create({
    baseURL: process.env.API_ROOT,
    timeout: 15000,
    withCredentials: false,
    headers: { 
      TermNo: Cookies.get('termNo'), //业务需要的设备编号 或者可以当成是token来理解
      'Access-Control-Allow-Headers': 'X-Requested-With,Content-Type',
      'Access-Control-Allow-Methods': 'OPTIONS, GET, POST'
    }
  });
  // 为什么调用后的代码 不写在这里？

上述例子抛出的问题：为什么不直接写调用前后的代码？

因为我们在使用封装的axios的时候。是引入这个js文件。
也就是说。这个js文件只在浏览器里面加载了一次（除非你刷新浏览器）
如果这样写，造成的结果就是TermNo这个值，永远只是浏览器加载那一刻的值。后续不会变化

外面api业务层引用这个自定义axios，只是引入这里的对象而已。这里要弄清楚

如果不用拦截器，当然我们可以在外面的api业务层，每个接口都写上最新的token。
不过这就太不优雅了！

使用拦截器

将上述代码稍加改动

import myAxios from 'axios';  //这里应该写import axios from 'axios' 的，别介意 哈哈;
// axios网络请求封装请求开始
import { Cookies } from 'quasar';
import process from 'process';
let axios = null;
 
  axios = myAxios.create({
    baseURL: process.env.API_ROOT,
    timeout: 15000,
    withCredentials: false,
    headers: { 
      TermNo: Cookies.get('termNo'), //业务需要的设备编号 或者可以当成是token来理解
      'Access-Control-Allow-Headers': 'X-Requested-With,Content-Type',
      'Access-Control-Allow-Methods': 'OPTIONS, GET, POST'
    }
  }); 
  
// 添加请求拦截器
axios.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    // debugger;
    config.headers['TermNo'] = Cookies.get('termNo');
    console.log('拦截器');
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
export default axios;

这样每次请求之前，都会执行function中的动作
也就是从Cookies.get(‘termNo’) 获取新的值给TermNo了