Axios配置状态码

原创

mob649e81684ddc 2024-04-03 05:47:26 ©著作权

©著作权归作者所有：来自51CTO博客作者mob649e81684ddc的原创作品，请联系作者获取转载授权，否则将追究法律责任

实现Axios配置状态码

一、整体流程

首先我们需要了解一下整个实现“Axios配置状态码”的流程。在实现过程中，我们需要先创建一个 Axios 实例，然后配置响应拦截器，在拦截器中处理不同状态码的情况。

下面是实现“Axios配置状态码”的具体步骤：

erDiagram
    step1(创建 Axios 实例) --> step2(配置响应拦截器) --> step3(处理状态码)

二、具体步骤

1. 创建 Axios 实例

首先，我们需要创建一个 Axios 实例，可以在项目的入口文件或者配置文件中进行配置。

// 引入axios库
import axios from 'axios';

// 创建一个axios实例
const instance = axios.create({
  baseURL: ' // 设置基础URL
  timeout: 5000 // 设置超时时间
});

export default instance;

在上面的代码中，我们创建了一个名为 instance 的 Axios 实例，并设置了基础 URL 和超时时间。

2. 配置响应拦截器

接下来，我们需要在 Axios 实例中配置响应拦截器，用于处理不同状态码的情况。

instance.interceptors.response.use(
  response => {
    return response.data; // 返回响应数据
  },
  error => {
    return Promise.reject(error); // 返回错误信息
  }
);

在上面的代码中，我们通过 instance.interceptors.response.use 方法配置了响应拦截器，当接收到响应时，我们返回响应数据；当接收到错误时，我们返回错误信息。

3. 处理状态码

最后，我们需要在响应拦截器中根据不同的状态码进行处理。

instance.interceptors.response.use(
  response => {
    return response.data; // 返回响应数据
  },
  error => {
    if (error.response.status === 401) {
      // 处理 401 状态码的情况
      // 可以跳转到登录页或者执行其他操作
    } else if (error.response.status === 404) {
      // 处理 404 状态码的情况
      // 可以显示404页面或者执行其他操作
    } else {
      return Promise.reject(error); // 返回其他错误信息
    }
  }
);

在上面的代码中，我们根据不同的状态码（401、404）进行了处理，可以根据实际需求来执行不同的操作。