在 JavaScript 中使用 fetch 發送 HTTP 請求
簡介
JavaScript 的 Fetch API 允許我們發送 HTTP 請求。自 ECMAScript 2015（通常稱為 ES6）被引入並使用 Promises 以來，它一直是 JavaScript 的標準部分。
本文將首先向您展示在開發 Fetch API 之前如何使用 vanilla JavaScript 發出請求。然後，我們將指導您如何使用 Fetch API，並強調它與其他方法相比有多大改進。
設置
本文著眼於使用 Fetch API 在瀏覽器中發出 HTTP 請求。因此，我們需要設置一個瀏覽器可以顯示的 HTML 頁面。在您的工作區中，首先創建一個 index.html 文件。
index.html 文件將在整篇文章中使用。 HTML 頁面沒有文本內容，它只會用於加載 JS 文件，因此我們可以在瀏覽器的控制台中看到請求和響應：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>JavaScript HTTP Requests</title>
</head>
<body>
<script src="./xhr.js"></script>
</body>
</html>
我們將更改 script 當我們學習新主題時標記，但 HTML 的其餘部分將保持不變。
您還希望打開瀏覽器控制台，以便我們查看 HTTP 請求的結果。這通常通過右鍵單擊網頁並選擇“檢查”來完成。在 Chrome 上看起來像這樣：
現在，讓我們選擇“控制台”選項卡，這樣我們就可以看到 JavaScript 記錄的任何輸出：
你都準備好了！讓我們開始使用 JavaScript 可能的第一種方法發送 HTTP 請求 - XMLHttpRequest .
使用 XMLHttpRequest 的請求
在 Fetch API 存在之前，所有 JavaScript 請求都是使用 XMLHttpRequest 完成的 （或 XHR ） 目的。儘管它的名字，這個對象可以從服務器檢索任何格式的數據。它不僅限於 XML。
讓我們在瀏覽器中處理 XHR 請求。在與您的 index.html 相同的文件夾中 文件，新建一個xhr.js 文件。
這個新的 JavaScript 文件將創建一個 XHR 對象並發送一個 GET 對 JSON API 的請求。然後，我們將在控制台中記錄請求的結果。在你的 xhr.js 文件，輸入以下內容：
let xhr = new XMLHttpRequest();
xhr.open('get', 'https://jsonplaceholder.typicode.com/posts/1');
xhr.send();
xhr.onload = function() {
console.log(xhr.response);
};
在第一行，我們創建了一個新的 XMLHttpRequest 目的。然後我們使用 open() 方法來創建一個新的 HTTP 請求。 open() 的第一個參數 是請求的 HTTP 方法 - 在這種情況下，我們發送一個 GET 要求。第二個參數是我們想要的服務器資源的 URL。然後我們使用 send() 發送請求的方法。
當 XHR 成功從網絡獲取數據，它發送一個 load 事件。為了在加載後處理數據，我們將一個函數設置為 onload XHR 的屬性 目的。在這種情況下，我們只需將響應記錄到控制台。
現在，在您的開發者控制台中，您應該會看到以下內容。
很好地使用 XMLHttpRequest 發出 API 請求 ！
雖然可用，但它處理異步數據的方式與現代 JavaScript 中使用的有組織和標準化的 Promise 非常不同。我們可以使用 Fetch API 維護更簡單的代碼。
獲取 API
Fetch API 是一個基於 Promise 的 API，用於發出 HTTP 請求，類似於我們使用 XMLHttpRequest 所做的 .不同於 XMLHttpRequest 使用 Fetch API 時，我們不必創建新對象。瀏覽器帶有一個全局 fetch() 我們可以用來發出請求的函數。
讓我們看看如何使用這個 API 在 Internet 上發出 HTTP 請求。
使用 Fetch 發送請求
Fetch API 可以使 GET , POST , PUT , PATCH , DELETE 和其他類型的 HTTP 請求。我們將重點介紹 HTTP 請求中最常用的兩種方法：GET 和 POST .
GET 請求
讓我們使用 Fetch API 來製作一個 GET 請求 https://jsonplaceholder.typicode.com/posts/1 就像我們對 XMLHttpRequest 所做的那樣 早一點。
在你的 index.html 文件，更改 script 標記來引用一個新的 JavaScript 文件：
<script src="./fetchGet.js"></script>
現在創建新的 fetchGet.js 文件在同一個工作區。我們將發送一個 GET 再次請求並將輸出記錄到控制台。在fetchGet.js中輸入以下代碼 ：
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(json => console.log(json));
在第一行我們使用全局 fetch() 發送 GET 的函數 請求我們的 API。 fetch()的參數 是服務器端資源的 URL。
然後我們用 then() 鏈接承諾 方法，它在 response 中捕獲 HTTP 響應 參數並調用它的 json() 方法。 json() 方法將響應正文解析為 JSON 對象。但是，它會將其作為承諾返回。
這就是我們使用 then() 的原因 再次鏈接另一個 Promise，它將解析的 JSON 記錄到控制台。
重新加載 index.html 如果需要，您可以看到以下輸出：
注意 ：輸出看起來與我們製作 GET 時得到的不同 使用 XMLHttpRequest 請求 .那是因為 XMLHttpRequest 將 HTTP 響應數據作為字符串返回，而我們將數據解析為 JSON 對象。雖然返回的格式不同，但它們的內容是一樣的。
讓我們看看如何使用 fetch() 在 POST 中發送數據 請求。
POST 請求
我們可以使用 fetch() 上傳數據 通過添加一個 JavaScript 對像作為其第二個參數，其中包含發送 HTTP 請求所需的信息。
讓我們使用 fetch() 在 POST 中上傳 JSON 數據 對模擬 API 的請求。在你的 index.html 文件，更改 script 標記來引用一個新的 JavaScript 文件：
免費電子書：Git Essentials
查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！
<script src="./fetchPost.js"></script>
現在創建 fetchPost.js 在您的工作區中，以便我們製作一個 POST 向 API 發出請求，該 API 會將新的待辦事項作為 JSON 對像上傳。在 fetchPost.js 中鍵入以下代碼 ：
const todo = {
title: 'Some really important work to finish'
};
fetch('https://jsonplaceholder.typicode.com/todos', {
method: 'POST',
body: JSON.stringify(todo),
headers: {
'Content-type': 'application/json; charset=UTF-8'
}
})
.then(response => response.json())
.then(json => {
console.log(json);
});
我們要做的第一件事是創建一個 todo 對象，其中包含我們要發送到 API 的數據。
與 GET 一樣 請求，我們使用 fetch() 通過提供我們想要訪問的 API 的 URL。然而，這一次我們有一個對像作為 fetch() 的第二個參數 具有以下屬性：
method:一個字符串，指定在請求中使用的 HTTP 方法body:一個字符串，包含我們希望在請求中提供給服務器的任何數據headers:一個對象，允許我們添加我們希望 HTTP 請求包含的任何標頭
與 GET 一樣 請求，我們將服務器的響應處理為 JSON 並將其記錄到開發者控制台。重新加載我們的 index.html 應該向我們展示以下控制台輸出：
使用 fetch() 做得很好 通過POST上傳數據 請求！
現在我們已經掌握了使用 Fetch API 發出各種 HTTP 請求的方法，讓我們看看如何處理不同的 HTTP 響應。
使用 Fetch 處理響應
到目前為止，我們一直在將響應數據解析為 JSON。雖然這適用於示例中使用的 API，但其他響應可能會返回不同類型的非 JSON 數據。
fetch() 成功後返回的 HTTP 響應對象 請求可以解析為各種格式。除了 json() 方法，我們可以使用以下方法：
text():以字符串數據形式返迴響應blob()：將響應作為 blob 對象（二進制數據及其編碼）返回formData():返迴響應為FormData對象（存儲字符串數據的鍵值對）arrayBuffer():將響應返回為ArrayBuffer（二進制數據的低級表示）
像 json() 方法，這些函數返回一個帶有內容的承諾。因此，它們都必須用 then() 鏈接起來 函數，以便處理內容。
這些函數用於處理返回數據的成功 HTTP 響應。現在讓我們看看如何使用 Fetch API 處理錯誤。
處理 HTTP 錯誤
與任何其他承諾一樣，fetch() 錯誤在 catch() 中處理 放置在 Promise 鏈末尾的方法。但是，catch() 函數僅在 fetch() 時使用 無法發送請求。這通常意味著存在網絡錯誤。
如果我們嘗試訪問一個不存在的 URL 並且服務器返回 404，它不會被 catch() 捕獲 方法，因為 404 是有效的 HTTP 響應狀態。
因此，在使用 Fetch API 處理錯誤時，我們需要做兩件事：
- 包括
catch()承諾鏈末尾的子句以獲取任何網絡錯誤 - 檢查響應的 HTTP 狀態碼是否成功。
讓我們再做一個例子，我們嘗試獲取一個不存在的 URL。
使用我們的 GET 請求示例，我們可以使用 catch() 像這樣：
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(json => console.log(json))
.catch(err => console.error(err));
但是，catch() 函數僅在 fetch() 時使用 無法發送請求。在你的 index.html 文件，更改腳本標籤以引用新的 JavaScript 文件：
<script src="./fetchError.js"></script>
現在在您的工作區中創建一個新的 fetchError.js 文件。輸入以下代碼：
fetch("https://jsonplaceholder.typicode.com/notreal/")
.then(response => {
if (!response.ok) {
throw new Error("Could not reach website.");
}
return response.json();
})
.then(json => console.log(json))
.catch(err => console.error(err));
我們首先發送一個 GET 請求該 API 上不存在的 URL。注意第一個 then() 的變化 將響應正文解析為 JSON 的函數：
if (!response.ok) {
throw new Error("Could not reach website.");
}
我們檢查 ok 屬性，它是布爾值。它是true 如果響應的 HTTP 狀態碼在 200-299 之間。通過使用 not 運算符（! )，我們可以捕獲服務器返回 HTTP 錯誤的情況。如果確實收到 HTTP 錯誤，我們會拋出一個自定義錯誤，該錯誤將結束 fetch() 承諾鏈。
如果我們沒有收到 HTTP 錯誤，我們會像以前一樣將 JSON 響應作為 Promise 返回。
在 Promise 鏈的末尾，我們有一個 catch() 函數，它只是將錯誤記錄到控制台。
如果你重新加載你的 index.html 頁面，你應該看到這個控制台輸出：
做得好，您介紹了 Fetch API 的基礎知識。
結論
Fetch API 提供了一種基於 Promise 的方式在 JavaScript 中發送 HTTP 請求。因為它是基於 Promise 的，開發人員認為它是 XMLHttpRequest 的更簡潔的替代品 .
使用 fetch() 函數，我們可以製作GET 和 POST 對不同 URL 的請求。我們可以配置一個fetch() 請求使用我們想要使用的任何 HTTP 方法。
fetch() 函數還提供了一個response 可以解析為各種格式的對象。其中包括 JSON、文本和字節等等。
我們還看到了在使用 fetch() 發出請求時如何處理錯誤 .除了把 catch() 在 Promise 鏈末尾的方法來獲取網絡錯誤，我們還應該在解析數據之前檢查我們收到的 HTTP 響應的狀態碼。
Fetch API 使外部 API 調用可在不使用外部庫的情況下進行管理。您打算使用 fetch() 訪問哪些 API ?
