axios错误处理中常用的字段

  • error.response：当请求已经发出，并且服务器返回了一个非 2xx 的状态码时，可以通过 error.response 获取到错误的详细信息。
  • error.request：当请求已经发出，但没有收到任何响应时，可以通过 error.request 获取到请求的详细信息。
  • error.message：当在设置请求时发生错误（例如，无效的 URL）时，可以通过 error.message 获取到错误的消息。

除此之外, 如果你希望进行更精细的错误处理，你可以考虑以下几个方面：

  • 区分服务器错误和客户端错误：你可以根据 error.response.status 的值来区分服务器错误（5xx）和客户端错误（4xx）。例如，如果 error.response.status 是 404，那么说明请求的资源不存在；如果 error.response.status 是 500，那么说明服务器内部出错。
  • 处理网络错误：如果 error.request 存在但 error.response 不存在，那么说明请求已经发出，但没有收到响应。这可能是因为网络错误或者请求超时。你可以添加一些代码来处理这种情况。
  • 处理配置错误：如果 error.config 存在，那么说明在设置请求时出了点问题。你可以检查 error.config 来找出问题的原因。
  • 使用 axios 的拦截器：axios 提供了拦截器（interceptors），你可以使用它们来在请求被发送或响应被接收之前对它们进行修改。
  • 使用 HTTP 状态码库：有些库（如 http-status-codes）提供了 HTTP 状态码的名称和消息，你可以使用这些库来生成更友好的错误消息

基本的错误处理示例

这里就列举一个基本通用的错误处理示例吧!

对于更精细的例子, 需要的请结合本文介绍的内容并根据自己项目的具体场景来自行思考, 这里就不做展示了。

请看下方示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import { api } from 'boot/axios';
export async function SetItem_sqlite(key: string, value: string) {
  api
    .post('/store/set', {
      key: key,
      value: value,
    })
    .then((req) => {
      console.info('status=', req.status, '->SetItem_sqlite 请求已成功执行并返回->', req.data);
    })
    .catch((error) => {
      if (error.response) {
        // 请求已经发出，但是服务器返回了一个非 2xx 的状态码
        console.error('Error:', '请求已经发出且收到响应，但是服务器返回了一个非 2xx 的状态码');
        console.error('Error status:', error.response.status);
        console.error('Error data:', error.response.data);
        if (error.response.status >= 400 && error.response.status < 500) {
          console.error('This is a client error.', '(此为服务端的独断, 若有不服可详细分析)');
        } else if (error.response.status >= 500) {
          console.error('This is a server error.', '(此为服务端的独断, 若有不服可详细分析)');
        }
      } else if (error.request) {
        // 请求已经发出，但是没有收到响应
        console.error('Error:', '请求已经发出，但是没有收到响应');
        console.error('Error request:', error.request);
      } else {
        // 发送请求时出了点问题
        console.error('Error:', '请求未正常发出,请检查请求地址是否正确,或其它种类的错误可能');
        console.error('Error message:', error.message);
      }
      // 通过打印 error.config，可以查看到导致错误的请求的详细配置，这对于调试和解决问题非常有帮助
      console.error('Error config:', error.config);
    });
}

export async function GetItem_sqlite(key: string): Promise<string> {
  return await api
    .get('/store/get', {
      params: {
        key: key,
      },
    })
    .then((req) => {
      console.info('status=', req.status, '->GetItem_sqlite 请求已成功执行并返回->', req.data);
      return req.data.value;
    })
    .catch((error) => {
      if (error.response) {
        // 请求已经发出，但是服务器返回了一个非 2xx 的状态码
        console.error('Error:', '请求已经发出且收到响应，但是服务器返回了一个非 2xx 的状态码');
        console.error('Error status:', error.response.status);
        console.error('Error data:', error.response.data);
        if (error.response.status >= 400 && error.response.status < 500) {
          console.error('This is a client error.', '(此为服务端的独断, 若有不服可详细分析)');
        } else if (error.response.status >= 500) {
          console.error('This is a server error.', '(此为服务端的独断, 若有不服可详细分析)');
        }
      } else if (error.request) {
        // 请求已经发出，但是没有收到响应
        console.error('Error:', '请求已经发出，但是没有收到响应');
        console.error('Error request:', error.request);
      } else {
        // 发送请求时出了点问题
        console.error('Error:', '请求未正常发出,请检查请求地址是否正确,或其它种类的错误可能');
        console.error('Error message:', error.message);
      }
      // 通过打印 error.config，可以查看到导致错误的请求的详细配置，这对于调试和解决问题非常有帮助
      console.error('Error config:', error.config);
    });
}

在这个示例中，我们首先发送一个 GET 请求到 /some/url。然后，我们使用 .then 方法来处理成功的响应，使用 .catch 方法来处理错误。

在 .catch 方法中，我们首先检查 error.response。如果 error.response 存在，那么说明请求已经发出，但是服务器返回了一个非 2xx 的状态码。我们打印出错误的状态码和服务器返回的数据，并根据状态码的值来判断这是一个客户端错误还是服务器错误。

然后，我们检查 error.request。如果 error.request 存在，那么说明请求已经发出，但是没有收到响应。我们打印出请求的信息。

最后，如果 error.response 和 error.request 都不存在，那么说明在发送请求时出了点问题。我们打印出错误的消息。

除此之外, 最后 console.log('Error config:', error.config); 这行代码的作用是打印出发生错误的请求的配置信息。

在 axios 中，error.config 是一个对象，包含了请求的配置。这些配置信息包括请求的 URL、方法、头部信息等。通过打印 error.config，你可以查看到导致错误的请求的详细配置，这对于调试和解决问题非常有帮助。