Ajax, Axios, Fetch和Http全攻略：自定义错误和自定义拦截器

2023-12-09 07:15:44

自定义处理网络请求的错误和拦截

导言

在现代网络开发中，可靠而有效的网络通信至关重要。了解如何处理错误并自定义网络请求的拦截非常重要。本文将深入探讨在 JavaScript 中使用 Ajax、Axios、Fetch 和 Http 库处理自定义错误和自定义拦截的技术。

1. 定义自定义错误范围

当服务器响应请求时，它会返回一个状态码指示操作的状态。默认情况下，状态码 200 至 299 被认为是成功的，而其他状态码被视为错误。您可以使用 validateStatus 选项来定义自定义错误范围。

axios.get('/api/users', {
  validateStatus: function (status) {
    return status >= 200 && status < 400; // Define custom error range
  }
});

2. 拦截请求或响应

拦截器允许您在请求或响应被处理之前对其进行修改或执行其他操作。您可以使用 interceptors 为请求和响应添加拦截器。

请求拦截器：

axios.interceptors.request.use(function (config) {
  // Do something before the request is sent
  return config;
}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

响应拦截器：

axios.interceptors.response.use(function (response) {
  // Do something with the response data
  return response;
}, function (error) {
  // Do something with response error
  return Promise.reject(error);
});

3. 为自定义 Axios 实例添加拦截器

如果您正在使用 Axios 库，您还可以为自定义 Axios 实例添加拦截器。这使您可以为特定实例配置拦截器，而不会影响其他实例。

const instance = axios.create();

instance.interceptors.request.use(function (config) {
  // Do something before the request is sent
  return config;
}, function (error) {
  // Do something with request error
  return Promise.reject(error);
});

instance.interceptors.response.use(function (response) {
  // Do something with the response data
  return response;
}, function (error) {
  // Do something with response error
  return Promise.reject(error);
});