axios响应拦截器返回错误

在前端开发中，我们经常会使用axios库来发起HTTP请求。而在很多场景下，我们需要对请求的响应进行统一的处理，例如错误处理、状态码检查等等。为了实现这些功能，axios提供了拦截器（interceptor）功能，允许我们在请求发送之前和请求响应之后对其进行处理。

在本篇文章中，我们将重点关注axios响应拦截器，并演示如何使用拦截器来处理错误响应。

什么是拦截器？

拦截器是一种机制，可在请求或响应被处理之前拦截它们，并对其进行处理。在axios中，我们可以通过使用axios.interceptors来配置拦截器。

axios提供了以下两种类型的拦截器：

  • 请求拦截器（Request Interceptor）：请求发出之前触发的拦截器。
  • 响应拦截器（Response Interceptor）：请求响应返回之后触发的拦截器。

本文将重点介绍响应拦截器。

响应拦截器的作用

响应拦截器允许我们在请求的响应返回之后对其进行处理。在实际应用中，我们通常会用它来处理错误响应，例如统一处理错误提示、跳转到错误页面等等。

添加响应拦截器

使用axios，我们可以通过以下方式来添加响应拦截器：

// 创建axios实例
const instance = axios.create();

// 添加响应拦截器
instance.interceptors.response.use(
  response => {
    // 响应成功处理逻辑
    return response;
  },
  error => {
    // 响应错误处理逻辑
    return Promise.reject(error);
  }
);

上述代码中，我们首先创建了一个axios实例instance，然后通过instance.interceptors.response.use方法来添加响应拦截器。use方法接收两个函数作为参数，第一个函数会在请求成功时被调用，第二个函数会在请求出错时被调用。

在第一个函数中，我们可以对请求成功的响应进行处理，并返回处理后的响应。在第二个函数中，我们可以对错误的响应进行处理，并返回一个被reject的Promise对象。

错误处理示例

下面是一个简单的示例，展示如何使用axios响应拦截器来处理错误响应：

// 创建axios实例
const instance = axios.create();

// 添加响应拦截器
instance.interceptors.response.use(
  response => {
    // 响应成功处理逻辑
    return response;
  },
  error => {
    // 响应错误处理逻辑
    if (error.response) {
      // 响应返回了错误状态码
      if (error.response.status === 404) {
        // 处理404错误
        console.log("请求的资源不存在");
      } else if (error.response.status === 500) {
        // 处理500错误
        console.log("服务器内部错误");
      }
    } else if (error.request) {
      // 请求发送了但未收到响应
      console.log("请求超时，请稍后再试");
    } else {
      // 其他错误
      console.log("请求出错");
    }
    return Promise.reject(error);
  }
);

在上述代码中，我们通过检查error.response.status来判断响应的状态码，并根据不同的状态码进行相应的处理。如果响应返回了错误状态码，我们可以根据需要进行自定义的错误处理逻辑。

值得注意的是，我们在处理错误之后，还需要通过return Promise.reject(error)将错误继续向下传递，以便我们能够在调用axios的地方通过catch方法捕获到这个错误。

总结

通过axios提供的响应拦截器，我们可以实现对请求响应的统一处理。在本文中，我们重点介绍了axios响应拦截器的作用以及如何使用拦截器来处理错误响应。希望本文能对你有所帮