vue3 中使用 axios 返回字段丢失

原创

mob649e816209c2 2024-05-30 05:29:11 ©著作权

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

Vue3 中使用 axios 返回字段丢失

在使用 Vue3 开发项目的过程中，我们常常会使用 axios 这个库来发起网络请求。然而有时候我们会遇到一个问题，就是在接收返回数据时，发现部分字段丢失了。这可能是因为 axios 默认会将返回的数据进行 JSON.parse() 处理，导致数据丢失。下面我们来看一下如何解决这个问题。

问题描述

当我们使用 axios 发起请求，并在接收到数据后，我们发现部分字段在 Vue 组件中丢失了，这可能是由于 axios 的默认配置导致的。axios 会将返回的数据自动进行 JSON.parse() 处理，这可能会导致数据类型的转换和部分字段的丢失。

解决办法

为了避免数据丢失的问题，我们可以在 axios 的配置中设置 transformResponse，手动处理返回的数据，防止数据丢失。下面是一个示例代码：

```javascript
import axios from 'axios';

const instance = axios.create({
  transformResponse: [(data) => {
    try {
      return JSON.parse(data);
    } catch (error) {
      return data;
    }
  }]
});

instance.get('
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.log(error);
  });


在这个示例代码中，我们创建了一个 axios 实例，并设置了 `transformResponse` 为一个数组，数组中包含一个回调函数，该函数会尝试对返回的数据进行 JSON.parse() 处理，如果处理失败则直接返回原始数据。

## 状态图

下面是一个状态图，描述了 axios 请求的过程：

```mermaid
stateDiagram
    [*] --> Loading
    Loading --> Success
    Loading --> Error
    Error --> Loading

类图

下面是一个类图，描述了 axios 实例的结构：

classDiagram
    class axios {
        -defaults
        -interceptors
        -get()
        -post()
        -put()
        -delete()
        +create()
    }