axios访问网站出现了错误, 如何解析错误呢? ChatGPT告诉你

牙叔教程 简单易懂

问

我是用axios访问网站, 如果出现了错误, 怎么提取错误信息?

ChatGPT答

在axios的响应拦截器中，可以通过判断HTTP状态码或者自定义的错误码来提取错误信息。示例代码如下：

import axios from 'axios';

// 创建axios实例
const instance = axios.create({
  baseURL: 'https://example.com',
});

// 添加响应拦截器
instance.interceptors.response.use(
  response => {
    // 请求成功时的操作

    return response;
  },
  error => {
    // 请求失败时的操作
    if (error.response) {
      // HTTP错误状态码
      console.log(error.response.status);
      // 错误信息
      console.log(error.response.data.message);
    } else if (error.request) {
      // 没有收到响应
      console.log(error.request);
    } else {
      // 其他错误
      console.log('Error', error.message);
    }
    return Promise.reject(error);
  }
);

// 发送请求
instance.get('/api/data').catch(error => {
  // 处理请求失败的情况
});

以上是一种基本处理方式，具体根据项目和接口的不同自行调整。

他还用了拦截器, 我不想用拦截器, 再问

---

问

我不想使用拦截器

ChatGPT答

如果您不想使用拦截器，可以在请求失败的回调函数中直接获取错误信息。示例代码如下：

import axios from 'axios';

// 发送请求
axios.get('https://example.com/api/data')
  .then(response => {
    // 处理请求成功的情况
  })
  .catch(error => {
    if (error.response) {
      // HTTP错误状态码
      console.log(error.response.status);
      // 错误信息
      console.log(error.response.data.message);
    } else if (error.request) {
      // 没有收到响应
      console.log(error.request);
    } else {
      // 其他错误
      console.log('Error', error.message);
    }
    // 处理请求失败的情况
  });

这样就可以直接在请求失败的回调函数中获取到错误信息了。注意，在请求失败时，error对象包含很多信息，需要通过判断来确定错误类型并提取相应的信息。

看着还挺正常的, 我问问他为啥和我的不一样

---

问

为什么别人访问ChatGPT的api发生错误是这样解析的?

e.response.data.error.message

.catch((e) => {
  console.log("axios发生错误");
  let errorMsg = e?.response?.data?.error?.message ? e.response.data.error.message : e.message;
  console.log(errorMsg);
});

而你是这样解析的: error.response.data.message

ChatGPT答

在使用axios访问API时，错误的返回格式是由后端接口定义的。因此，不同的API可能会有不同的错误信息格式。

一般来说，当请求失败时，error.response表示服务器响应错误，它包含以下几个属性：

• status：HTTP状态码。
• data：响应数据。
• headers：响应头部。
• config：请求配置对象。

如果服务器返回的错误信息中包含了一个名为error的字段，并且该字段还包含了一个名为message的子字段，那么可以通过以下代码获取到该错误消息：

let errorMsg = e?.response?.data?.error?.message ? e.response.data.error.message : e.message;

如果服务器返回的错误信息没有这样的结构，那么就需要根据实际情况进行处理。

---

问

还有没有更好的提取错误消息的方法?

ChatGPT答

除了使用三元表达式来提取错误消息之外，还有一个更简洁的方法是使用lodash库中的get()函数。该函数可以在对象中安全地获取嵌套属性并避免抛出异常。示例如下：

import axios from 'axios';
import { get } from 'lodash';

// 发送请求
axios.get('https://example.com/api/data')
  .then(response => {
    // 处理请求成功的情况
  })
  .catch(error => {
    const errorMsg = get(error, 'response.data.error.message', error.message);
    console.log(errorMsg);
    // 处理请求失败的情况
  });

上述代码中，通过调用get()函数从error对象中安全地获取response.data.error.message属性值，并在无法获取时返回error.message作为默认值。

这种方式比使用三元表达式更加简洁可读，同时也更灵活。如果后端接口返回的错误信息格式发生了变化，只需要修改一行代码即可适应新的格式。

不是我想要的答案, 我要吐槽它

---

问

感觉不如 ?. 简洁呢

ChatGPT答

确实，使用可选链操作符（?.）可以让代码更加简洁。如果你的运行环境已经支持ES2020语法，那么可以直接使用可选链操作符来获取嵌套属性，就像这样：

import axios from 'axios';

// 发送请求
axios.get('https://example.com/api/data')
  .then(response => {
    // 处理请求成功的情况
  })
  .catch(error => {
    const errorMsg = error?.response?.data?.error?.message ?? error.message;
    console.log(errorMsg);
    // 处理请求失败的情况
  });

上述代码中，使用了可选链操作符来获取error.response.data.error.message属性值，并在无法获取时返回error.message作为默认值。

需要注意的是，虽然可选链操作符非常方便，但它不适用于所有情况。在一些特殊的场景下，比如需要对获取到的属性值进行修改或传递给其他函数等操作时，可能需要使用其他方式来处理。

这个答案, 比三元表达式简洁啊, 我决定就用ChatGPT给的这个答案了

公众号 牙叔教程

这个ChatGPT星球有多牛逼