axios中的请求拦截器和响应拦截器的常用功能

1、请求拦截器
在请求被 then 或 catch 处理前拦截它们，一般用于登录后设置token，例如后台项目，有很多请求都需要添加token，因此可以在请求拦截器中设置token，就不需要在其他地方一遍一遍设置token了。

import axios from 'axios'
import { useCookies } from '@vueuse/integrations/useCookies'
const instance = axios.create({
  baseURL: '/api'
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  const cookies = useCookies()
  const token = cookies.get('admin-token')
  if (token) {
    config.headers['token'] = token
  }
  return config;
}, function (error) {
  return Promise.reject(error);
});

2、响应拦截器
在响应被 then 或 catch 处理前拦截它们，一般用于简化获取响应后的数据，例如响应传回来的数据你要res.data.data.msg，这样子取会很麻烦，因此可以在响应拦截器中直接对响应数据设置，那么后续的响应中你就可以直接res.msg，不需要再一层一层往下找。

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  return response.data.data;
}, function (error) {
  return Promise.reject(error);
});