vue拦截器是什么，如何使用

&ACE&2023-10-13 3:05

Vue拦截器是一种用来拦截并处理HTTP请求和响应的机制，它可以在请求或响应发送前或后进行一些预处理或处理。在Vue中，可以使用axios库来实现拦截器，axios库是一个基于Promise的HTTP客户端，可以用于浏览器和Node.js平台。

使用axios拦截器需要先创建一个axios实例，然后可以通过该实例的interceptors属性来定义请求拦截器和响应拦截器。

请求拦截器可以用来在发送请求前进行一些统一的处理，如添加公共请求头、设置请求超时时间等。响应拦截器可以用来统一处理服务器返回的响应数据，如对接口返回的数据进行统一处理、处理错误信息等。

以下是axios拦截器的使用方法：

复制代码

import axios from 'axios';

// 创建 axios 实例
const instance = axios.create({
  baseURL: 'http://api.example.com',
  timeout: 5000,
});

// 请求拦截器
instance.interceptors.request.use(config => {
  // 在发送请求前做些什么
  config.headers.Authorization = window.localStorage.getItem('token');
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 响应拦截器
instance.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response.data;
}, error => {
  // 对响应错误做点什么
  return Promise.reject(error);
});

export default instance;

在上面的代码中，我们首先创建了一个axios实例，然后定义了请求拦截器和响应拦截器。在请求拦截器中，我们添加了一个公共请求头Authorization，并将其值设置为本地存储中的token值。在响应拦截器中，我们对服务器返回的响应数据进行了处理，返回了响应数据中的data部分。如果响应出错，我们则返回了一个Promise对象，使调用拦截器的代码能够获取到错误信息。

最后，我们将axios实例导出，可以在其他组件中引用使用。通过这种方式，我们可以避免在每个组件中都要写请求拦截器和响应拦截器的重复代码，提高了开发效率，使代码更加简洁易懂。