vue axios 没有返回状态

原创

mob649e81586edc 2023-11-14 12:46:45 ©著作权

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

Vue Axios 没有返回状态

在使用 Vue.js 开发过程中，我们经常会使用到 Axios 库来发送 HTTP 请求。在一些情况下，我们可能会发现 Axios 并没有返回状态码，这可能让我们感到困惑。本文将解释为什么 Axios 不能直接返回状态码，并提供一个解决方案来获取状态码。

Axios 简介

Axios 是一个基于 Promise 的 HTTP 库，可以用于浏览器和 Node.js。它具有简洁的 API 接口，可以方便地发送各种类型的 HTTP 请求，并处理响应数据。

为什么 Axios 没有返回状态码

Axios 设计初衷是为了提供简洁和易用的 API，同时尽量减少不必要的复杂性。因此，在设计过程中，Axios 没有直接提供返回状态码的功能。

Axios 响应对象包含了很多有用的信息，包括状态码、响应头、响应体等等。但是，为了让开发者能够更方便地使用这些信息，Axios 将它们封装在了一个特殊的对象中，而不是直接返回给调用者。

解决方案：自定义 Axios 拦截器

要获取 Axios 的返回状态码，我们可以通过自定义 Axios 的拦截器来实现。拦截器可以在请求发送前或响应返回后执行一些自定义的逻辑。

以下是一个示例，展示了如何使用拦截器获取状态码：

import axios from 'axios';

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

// 添加请求拦截器
instance.interceptors.request.use(
  config => {
    // 在发送请求之前做一些处理
    return config;
  },
  error => {
    // 请求错误时的处理
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  response => {
    // 在响应返回后做一些处理
    const status = response.status;
    // 这里可以对状态码进行处理
    console.log('状态码：', status);
    return response;
  },
  error => {
    // 响应错误时的处理
    return Promise.reject(error);
  }
);

// 发送请求
instance.get('/api/data')
  .then(response => {
    // 处理响应数据
  })
  .catch(error => {
    // 处理请求错误
  });

在上面的示例中，我们创建了一个 Axios 实例，并添加了请求拦截器和响应拦截器。在请求拦截器中，我们可以在发送请求之前对请求进行处理；在响应拦截器中，我们可以在响应返回后对响应进行处理。

在响应拦截器中，我们可以通过 response.status 获取到状态码，并进行相应的处理。这样就实现了获取状态码的功能。

序列图

下面是一个使用 Axios 发送 HTTP 请求的序列图，展示了整个过程的交互：

sequenceDiagram
  participant 用户
  participant Vue 组件
  participant Axios
  participant 服务器

  用户->>Vue 组件: 发送请求
  Vue 组件->>Axios: 调用方法发送请求
  Axios->>服务器: 发送请求
  服务器-->>Axios: 返回响应
  Axios-->>Vue 组件: 返回响应
  Vue 组件-->>用户: 处理响应数据

从序列图中可以看出，Axios 接收到服务器的响应后，会将响应数据返回给 Vue 组件进行处理。