对于axios请求拦截器的理解

axios官方文档如下：

axios中文文档|axios中文网 | axios欢迎使用 axios，本文档将帮助您快速上手。(troubleshooting.html) 中的解答， 什么是 axios？Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 特性 从浏览器中创建 XMLHttpRequests 从 nodehttp://www.axios-js.com/zh-cn/docs/

这一段代码如下·：

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

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

或：

// request拦截器
service.interceptors.request.use(config => {
    return config
}, error => {
    Promise.reject(error)
})


// 添加响应拦截器
// 响应拦截器
service.interceptors.response.use(res => {
    // 响应正确使处理这个
    return res
},
    error => {
        // 响应错误使处理
        return Promise.reject(error)
    }
)

首先我们了解到以上的一些信息。

然后我们可以分析出：

Axios 的请求拦截器和响应拦截器是两个非常有用的功能，它们可以让你在请求发送到服务器之前或从服务器返回之前进行干预。

请求拦截器（Request Interceptor）是指那些在请求被发送到服务器之前执行的代码。你可以使用请求拦截器来修改请求数据，添加额外的头信息，或者对请求的数据进行统一处理。例如，你可以在请求拦截器中添加一个 token 到每个请求的头信息中，这样就可以保证每个请求都有相同的认证信息。

响应拦截器（Response Interceptor）是指那些在服务器的响应返回到客户端之前执行的代码。你可以使用响应拦截器来修改服务器的响应数据，进行错误处理，或者对响应的数据进行统一处理。例如，你可以在响应拦截器中检查响应的状态码，如果状态码表示错误，那么你可以将错误信息添加到应用程序的错误日志中。

Axios 的拦截器可以在请求和响应被 then 或 catch 处理之前进行拦截。这意味着你可以在应用程序的逻辑处理请求和响应之前，对请求和响应进行预处理。这种机制非常适合进行一些通用的处理，例如添加认证信息、处理错误等。

以下我们来看一个例子：

import { useCookies } from '@vueuse/integrations/useCookies'
import { ElNotification } from 'element-plus'

import axios from 'axios'
const service = axios.create({
    // axios中请求配置有baseURL选项，表示请求URL公共部分
    // baseURL: "http://ceshi13.dishait.cn"
    baseURL: "/api"
})
export default service;

// 请求拦截器和响应拦截器
// 添加请求拦截器
service.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    // 拿到token
    const cookies = useCookies()
    const token = cookies.get("user-token")
    // 给请求头添加token
    if(token){
        config.headers["token"] = token
    }
    return config;

  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
service.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    response = response.data.data
    return response;
  }, function (error) {
    // 对响应错误做点什么
    // 所有请求错误时，都会弹出他的错误信息msg
    ElNotification({
        // title: '账号错误',
        message: error.response.data.msg,
        type: 'error',
        position: 'top-right',
        duration: 3000,//如果设置0，弹出不会再一定时间后消失，会一直存在
    })
    return Promise.reject(error);
  });

这个例子在请求拦截器中添加了一个如果token存在，就往请求链接中添加一个token的header。

添加了一个响应错误时的拦截器，当请求错误，就弹出一个错误信息弹窗。