vue中请求拦截与响应拦截是什么

在 Vue.js 中，请求拦截（Request Interceptors）和响应拦截（Response Interceptors）是 Axios 这个常用的 HTTP 客户端库提供的功能。Axios 是在 Vue.js 项目中进行网络请求的常用工具之一。

**请求拦截**是在发送请求之前对请求进行预处理的过程。通过请求拦截器，您可以在发送请求之前对请求进行一些公共处理，例如添加身份验证 token、设置请求头等。这样可以避免每次发送请求时都要手动添加相同的信息，提高开发效率和代码可维护性。

示例代码如下：

axios.interceptors.request.use(config => {
  // 在请求发送之前做一些处理
  config.headers.Authorization = 'Bearer ' + getToken();
  return config;
}, error => {
  // 请求错误处理
  return Promise.reject(error);
});

**响应拦截**是在获取到响应结果后对响应进行处理的过程。通过响应拦截器，您可以对返回的数据进行统一处理，例如对错误状态码进行统一处理、对数据进行过滤或转换等。这样可以减少重复的处理代码，并提供一致的数据格式给业务逻辑代码使用。

示例代码如下：

axios.interceptors.response.use(response => {
  // 对响应数据进行处理
  const data = response.data;
  if (data.code !== 200) {
    // 处理错误状态码
    // ...
  }
  return data;
}, error => {
  // 响应错误处理
  return Promise.reject(error);
});

通过使用请求拦截器和响应拦截器，您可以在发送请求和处理响应的过程中进行公共逻辑的抽象和封装，使代码更加清晰和易于维护。