如何获取axios请求错误后的状态码

在前端开发中，我们经常使用axios来发送网络请求。当我们发起一个请求，服务器返回错误时，我们通常希望能够获取到该错误的状态码，以便进行相应的处理。本文将介绍如何在axios请求错误后获取状态码，并提供一个示例来演示该过程。

1. 使用axios拦截器

我们可以使用axios的拦截器来捕获请求和响应，并在请求失败时获取状态码。具体步骤如下：

  1. 创建一个axios实例并添加拦截器：
import axios from 'axios';

const api = axios.create();

api.interceptors.response.use(
  response => response,
  error => {
    if (error.response) {
      console.log('Response status code:', error.response.status);
    }
    return Promise.reject(error);
  }
);

export default api;
  1. 在拦截器中，当请求失败时，会进入error.response分支，从中获取状态码并进行相应处理。

2. 示例

下面是一个简单的示例，演示了如何使用上述方法获取axios请求错误后的状态码：

import api from './api';

api.get('
  .then(response => {
    console.log('Response data:', response.data);
  })
  .catch(error => {
    console.log('An error occurred:', error.message);
  });

在这个示例中，我们向一个不存在的API发送请求，会触发错误，并在拦截器中打印出该错误的状态码。

3. 类图

classDiagram
    class axios {
        -interceptors
        +create()
    }
    class Interceptors {
        +request
        +response
    }
    axios *-- Interceptors

4. 关系图

erDiagram
    ERROR ||--o| RESPONSE : has
    RESPONSE ||--o| STATUS_CODE : has

通过以上步骤，我们可以轻松地在axios请求错误后获取状态码，并进行相应处理。希望这篇文章对你有所帮助，谢谢阅读！