哪些HTTP响应状态码会在then()中触发？哪些会在catch()中触发

Axios 是一个流行的JavaScript库，用于发出HTTP请求。它使用Promise处理来自服务器的响应，并提供了方便的then()和catch()语法来处理数据或处理错误。

你是否曾经想过哪些HTTP响应状态码会导致axios调用 then() 回调函数，哪些会导致它调用 catch() 回调函数？在本文中，我们将解释axios如何处理HTTP响应状态码，并向你展示如何在代码中处理不同类型的响应。

1. 理解HTTP响应状态码

HTTP是支持网络的协议。当客户端（如Web浏览器）向服务器发送请求时，服务器会以状态码响应，指示请求的结果。状态码根据其第一个数字分为五个类别：

1xx：信息
2xx：成功
3xx：重定向
4xx：客户端错误
5xx：服务器错误

你会遇到最常见的状态码是2xx和4xx/5xx范围内的。

2xx 状态码表示请求成功，而 4xx/5xx 状态码表示出现错误。

以下是一些常见的2xx和4xx/5xx状态码的示例：

200：OK
201：已创建
204：无内容
400：错误的请求
404：未找到
500：服务器内部错误
2. axios如何处理HTTP响应状态码

当使用axios发出HTTP请求时，该库返回一个Promise。如果请求成功（即服务器以2xx状态码响应），Promise将被解决，并且then()回调函数将被调用并传入响应数据。另一方面，如果请求失败（即服务器以4xx或5xx状态码响应），Promise将被拒绝，并且catch()回调函数将被调用并传入错误信息。

示例： 在这个示例中，如果对/some/url的HTTP请求收到一个带有2xx状态码的响应，then()回调函数中的成功处理程序将使用响应数据被调用。另一方面，如果响应的状态码是4xx或5xx，则catch()回调函数中的错误处理程序将被调用以处理错误。

Javascript

axios.get('/some/url') 
    .then(response => { 
        // handle success 
    }) 
    .catch(error => { 
        // handle error 
    });

3. 处理不同类型的响应

现在你知道了axios如何处理HTTP响应状态码，你可以编写能够处理服务器不同类型响应的代码。例如，你可能想根据请求是否成功来执行不同的操作。

示例: 这是一个示例，说明如何对成功的（2xx）和失败的（4xx/5xx）响应做不同的处理。

Javascript

axios.get('/some/url') 
    .then(response => { 
        // handle success 
        if (response.status === 200) { 
            // do something with the data... 
        } else if (response.status === 201) { 
            // do something else... 
        } 
    }) 
    .catch(error => { 
        // handle error 
        if (error.response.status === 400) { 
            // handle bad request error... 
        } else if (error.response.status === 404) { 
            // handle not found error... 
        } 
    });

在该示例中，我们使用响应对象的“status”属性来检查HTTP状态码。如果代码为2xx，我们将在“then()”回调中处理成功情况。如果代码为4xx/5xx，则将在“catch()”回调中处理错误情况。

您可以使用此模式处理任何类型的HTTP响应，并编写更健壮的代码以处理不同的场景。

结论： 在本文中，我们学习了axios如何处理HTTP响应状态码以及如何编写可以处理不同类型响应的代码。我们涵盖了HTTP状态码的基本类别，并向您展示了如何使用axios promise的“then()”和“catch()”回调来处理成功和失败的响应。