Ajax 简明教程
Fetch API - Status Codes
Fetch API 提供了一个用于查找请求状态的特殊属性，该属性的名称为状态属性。它是 Response 接口的一个只读属性，它返回由给定请求的服务器发送的响应的 HTTP 状态码。例如，404 - 找不到资源，200 - 成功，400 - 错误的请求等。它得到了所有现代网络浏览器的支持。
Successful
成功的状态码是在请求成功完成后服务器将返回的状态码。一些常用的成功状态码及其含义如下：
Status |
Message |
Description |
200 |
OK |
如果请求可以。 |
201 |
Created |
当请求完成并创建了一个新资源。 |
202 |
Accepted |
当请求被服务器接受。 |
204 |
No Content |
当响应主体中没有数据。 |
205 |
Reset Content |
对于其他输入，浏览器会清除用于事务的表单。 |
206 |
Partial Content |
当服务器返回指定大小的部分数据。 |
Redirection
重定向状态代码是表征重定向响应状态的状态代码。常用重定向状态代码及其说明如下 −
Status |
Message |
Description |
300 |
Multiple Choices |
它用于表征链接列表。因此，用户可以选择任何一个链接并前往该位置。它只允许五个位置。 |
301 |
Moved Permanently |
当请求的页面移动到新 URL。 |
302 |
Found |
当请求的页面在不同的 URL 中找到。 |
304 |
Not modified |
URL is not modified. |
Client Error
客户端错误状态代码表征在请求期间客户端发生的错误。或者可以说，它们通知客户端，由于错误，请求未成功。常用客户端错误状态代码及其说明如下 −
Status |
Message |
Description |
400 |
Bad Request |
服务器无法完成请求，因为请求格式错误或者具有无效语法。 |
401 |
Unauthorised |
请求需要身份验证，并且用户未提供有效凭证。 |
403 |
Forbidden |
服务器了解该请求，但无法完成它。 |
404 |
Not Found |
找不到请求的页面。 |
405 |
Method Not Allowed |
通过该请求进行请求的方法不受该页面支持。 |
406 |
Not Acceptable |
客户无法接受服务器生成的响应。 |
408 |
Request Timeout |
Server timeout |
409 |
Conflict |
请求由于请求中的冲突而未完成。 |
410 |
Gone |
请求的页面不可用。 |
417 |
Exception Failed |
服务器不匹配 Expect 请求头字段的要求。 |
Server Error
服务器错误状态代码表示请求期间服务器端发生的错误。或者我们可以说它们通知客户端由于服务器出现错误，请求未成功。以下是常用的一些服务器错误状态代码及其说明 −
Status |
Message |
Description |
500 |
Internal Server Error |
当服务器在处理请求时遇到错误。 |
501 |
Not Implemented |
当服务器不识别请求方法或无法满足请求时。 |
502 |
Bad Gateway |
当服务器作为网关并从另一台服务器（上游）恢复无效响应时。 |
503 |
Service Unavailable |
当服务器不可用或关闭时。 |
504 |
Gateway Timeout |
当服务器作为网关且未及时从另一台服务器（上游）收到响应时。 |
505 |
HTTP Version Not Supported |
当服务器不支持 HTTP 协议版本时。 |
511 |
Network Authentication Required |
当客户端需要验证以获取对网络的访问权限时。 |
Example 1: Finding status code using fetch() function
在以下程序中，我们找到当前请求的状态代码。为此，我们从给定的 URL 获取数据。如果服务器返回的响应为 OK，则显示状态代码。如果不是，则显示请求失败状态。如果出现错误，则此代码使用 catch() 函数来处理错误。
<!DOCTYPE html>
<html>
<body>
<script>
fetch("https://jsonplaceholder.typicode.com/todos")
.then(response=>{
if (response.ok){
const mystatus = response.status;
// Display output in HTML page
document.getElementById("sendData").innerHTML = JSON.stringify(mystatus);
}else{
console.log("Request Fail:", mystatus);
}
})
// Handling error
.catch(err =>{
console.log("Error is:", err)
});
</script>
<h2>Status code of request</h2>
<div>
<p>Status of the current request is </p>
<!-- Displaying data-->
<p id = "sendData"></p>
</div>
</body>
</html>
Example 2: Finding status code using fetch() function with async/await
在以下程序中，我们找到当前请求的状态代码。为此，我们创建了一个异步函数。在此函数中，我们使用 fetch() 函数从给定的 URL 提取数据。如果服务器返回的响应为 OK，则在控制台日志中显示状态代码。如果不是，则显示请求失败状态。如果我们遇到错误，此代码将使用 catch() 函数来处理该错误。
<!DOCTYPE html>
<html>
<head>
<title>Fetch API Example</title>
</head>
<body>
<h1>Example of Fetch API</h1>
<script>
async function getStatus() {
try {
const myResponse = await fetch("https://jsonplaceholder.typicode.com/todos");
// Finding the status of the request
console.log("Status of the request:", myResponse.status);
console.log(myResponse);
} catch (err) {
console.log("Error is:", err);
}
}
getStatus();
</script>
</body>
</html>