axios拦截器如何拦截请求错误或者响应错误

在使用axios进行网络请求时，我们经常需要处理请求错误或者响应错误的情况。为了提高代码复用性和可维护性，axios提供了拦截器的功能，可以在请求发送前和响应返回后进行拦截和处理。

1. 请求拦截器

请求拦截器可以在发送请求前对请求进行处理，比如添加公共参数、设置请求头等操作。我们可以通过axios的interceptors.request.use方法来注册一个请求拦截器。

axios.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    // 添加公共参数
    config.params = {
      ...config.params,
      token: 'your_token',
    };
    // 设置请求头
    config.headers['Content-Type'] = 'application/json';
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

上面的代码中，我们通过axios.interceptors.request.use方法注册了一个请求拦截器。config参数是请求的配置对象，可以在这里对请求进行修改。error参数是请求错误对象，我们可以在这里处理请求错误。

2. 响应拦截器

响应拦截器可以在接收到响应后对响应进行处理，比如根据返回的状态码进行统一的错误处理、对返回的数据进行统一的格式化等操作。我们可以通过axios的interceptors.response.use方法来注册一个响应拦截器。

axios.interceptors.response.use(
  (response) => {
    // 对响应数据做些什么
    // 根据业务需求进行处理
    if (response.data.code !== 200) {
      // 返回错误信息
      return Promise.reject(response.data.message);
    }
    return response.data;
  },
  (error) => {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

上面的代码中，我们通过axios.interceptors.response.use方法注册了一个响应拦截器。response参数是响应对象，可以在这里对响应进行处理。error参数是响应错误对象，我们可以在这里处理响应错误。

3. 错误处理

对于请求错误和响应错误，我们可以在拦截器中进行统一的错误处理。在上面的代码示例中，我们使用Promise.reject方法返回了一个rejected状态的Promise对象，这样可以在调用请求的地方使用.catch方法来捕获错误并进行处理。

axios.get('/api/user')
  .then((response) => {
    // 处理正常返回的数据
    console.log(response);
  })
  .catch((error) => {
    // 处理错误信息
    console.error(error);
  });

上面的代码中，我们通过.catch方法捕获请求错误和响应错误，并进行处理。

4. 完整示例

下面是一个完整的示例，展示了如何使用axios拦截器来拦截请求错误和响应错误。

// 请求拦截器
axios.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    // 添加公共参数
    config.params = {
      ...config.params,
      token: 'your_token',
    };
    // 设置请求头
    config.headers['Content-Type'] = 'application/json';
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
axios.interceptors.response.use(
  (response) => {
    // 对响应数据做些什么
    // 根据业务需求进行处理
    if (response.data.code !== 200) {
      // 返回错误信息
      return Promise.reject(response.data.message);
    }
    return response.data;
  },
  (error) => {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

// 发送请求
axios.get('/api/user')
  .then((response) => {
    // 处理正常返回的数据
    console.log(response);
  })
  .catch((error) => {
    // 处理错误信息
    console.error(error);
  });