配置请求拦截器和响应拦截器

 请求拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

use中的第一个函数是请求成功时的回调函数

其中，config参数：包含了请求的配置信息，如URL、方法、头信息等

必须返回config，如果修改了config，修改后的config会应用到请求中

这个回调函数可以用来发送请求之前对请求进行一些预处理，如添加认证令牌、设置公共请求头等

use中的第二个函数是请求错误时的回调函数

其中，error参数：包含了请求错误的信息

示例：

//创建axios实例
const instance = axios.create({
  // 基础地址，超时时间
  baseURL,
  timeout: 10000
})

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    //添加认证令牌
    const UserStore = useUserStore()
    if (UserStore.token) {
      config.headers.Authorization = UserStore.token
    }
    return config
  },
  (err) => Promise.reject(err)
)

响应拦截器

axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

 use中的第一个函数是响应成功时的回调函数

其中，response参数 ：包含了响应的数据、状态码、头信息等

use中的第二个函数是响应失败时的回调函数

其中，error参数：包含了响应错误的信息

示例：

import { ElMessage } from 'element-plus'
import router from '@/router'
// 响应拦截器
instance.interceptors.response.use(
  (res) => {
    //当code为0时，为响应成功
    if (res.data.code === 0) {
      return res
    }
    //业务失败，给错误提示，抛出错误
    ElMessage.error(res.data.message || '服务异常')
    return Promise.reject(res.data)
  },
  (err) => {
    //处理401错误
    //错误的特殊情况 => 401 权限不足 或 token过期 => 拦截到登录
    if (err.response?.state === 401) {
      router.push('/login')
    }

    // 错误的默认情况 => 只要给提示
    ElMessage.error(err.response.data.message || '服务异常')
    return Promise.reject(err)
  }
)

日常写项目时，配置的请求拦截器和响应拦截器

import axios from 'axios'
import { ElMessage } from 'element-plus'
import router from '@/router'

const baseURL = 'http://0.0.0.0:8084'

const instance = axios.create({
  // 基础地址，超时时间
  baseURL,
  timeout: 10000
})

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    console.log("发送的请求为",config)
    // 携带token，将token存入本地浏览器中，防止刷新后过期
    // 要注意接口文档中的请求头的名称
    if (localStorage.getItem('USER_KEY')) {
      console.log("携带了令牌")
      config.headers.token = localStorage.getItem('USER_KEY')
    }
    return config
  },
  (err) => Promise.reject(err)
)

// 响应拦截器
instance.interceptors.response.use(
  (res) => {
    // 要注意接口文档中，表示响应成功的数值
    if (res.data.code === 1) {
          return res
    }
    // 业务失败，给错误提示，抛出错误
    ElMessage.error(res.data.message || '服务异常')
    return Promise.reject(res.data)
  },
  (err) => {
    // 处理401错误
    // 错误的特殊情况 => 401 权限不足 或 token过期 => 拦截到登陆
    if (err.response?.state === 401) {
      router.push('/login')
    }

    // 错误的默认情况 => 只要给提示
    ElMessage.error(err.response.data.message || '服务异常')
    return Promise.reject(err)
  }
)

export default instance
export { baseURL }