Vue 请求拦截器和响应拦截器：如何使用 axios 拦截器

Vue 请求拦截器和响应拦截器是用来对发出的请求进行预处理和对返回的响应进行统一处理的机制。\n\n请求拦截器（request interceptor）可以在发送请求之前对请求进行一些操作，例如添加请求头、验证登录状态等。在 Vue 中，可以使用 axios 库来发送请求，可以通过 axios 的拦截器来实现请求拦截器。具体的实现可以参考如下代码：\n\njavascript\n// 添加请求拦截器\naxios.interceptors.request.use(function (config) {\n // 在发送请求之前做些什么\n config.headers['Authorization'] = 'Bearer ' + getToken(); // 添加请求头，示例为添加 token\n return config;\n}, function (error) {\n // 对请求错误做些什么\n return Promise.reject(error);\n});\n\n\n响应拦截器（response interceptor）可以在接收到响应之后对响应进行一些操作，例如处理错误信息、统一处理返回数据等。同样地，在 Vue 中可以使用 axios 的拦截器来实现响应拦截器。具体的实现可以参考如下代码：\n\njavascript\n// 添加响应拦截器\naxios.interceptors.response.use(function (response) {\n // 对响应数据做些什么\n if (response.data.code !== 200) {\n // 处理错误信息，示例为判断返回的 code 是否为 200，如果不是则进行错误处理\n return Promise.reject(response.data.message);\n }\n return response.data;\n}, function (error) {\n // 对响应错误做点什么\n return Promise.reject(error);\n});\n\n\n以上代码中，通过 axios.interceptors.request.use 方法添加请求拦截器，通过 axios.interceptors.response.use 方法添加响应拦截器。在拦截器中可以对请求和响应进行自定义的处理逻辑。在请求拦截器中可以通过修改 config 对象来实现对请求的修改，而在响应拦截器中可以通过修改 response 对象来实现对响应的修改。