譯者 | 陳豪
審校 | 梁策 孫淑娟
如果我們想從 API中獲取數據或將數據發布到服務器，必須要用到Fetch API。fetch()為我們提供了一種通過請求和響應發送和接收 HTTP 請求的方法，fetch() 函數是一個全局函數，最常用于與 API 交互。
如何在 JavaScript 中使用 Fetch
我們在使用Fetch API獲取 URL的數據時，最基本的用法只需要一個參數。當我們運行 Fetch 時，它會有一個返回值：
let fetchExample = fetch("https://fjolt.com").then((res) => {
// Do something with res
});
Res包含一些很有意思的內置函數，如下：
- res.text() ：返回 URL 的文本內容。如果是網站，則返回 HTML。
- res.json() ：返回格式化的 JSON 數據。
- res.blob() : 返回 blob 數據。
- res.arrayBuffer()：返回數組緩沖區數據
- res.formData() ：返回 formData 數據。
下面是兩個例子：
使用 JavaScript Fetch 獲取網站的 HTML 內容
由于res.text()具有可以獲取URL 的文本內容的功能，所以可以使用它來獲取網站的整個 HTML 。一旦運行 res.text()，我們可以用另一個 then 捕獲響應并在控制臺記錄它：
let websiteData = fetch("https://fjolt.com").then(res => res.text()).then((data) => {
return data;
});
// Now contains our website's HTML.
如果鏈接不存在或發生錯誤，響應對象將返回錯誤。例如，找不到頁面將返回 404，或者網關錯誤將返回 502。
使用 JavaScript Fetch 從鏈接中獲取 JSON 內容
Fetch 的另一個常見用途是獲取數組的響應。如果想從 JSON 格式的 API 中獲取響應，我們可以使用 res.json()。例如，以下代碼將從 URL 返回一個 JSON 對象，假設 URL 正在發送有效的 JSON：
let apiResponse = fetch("https://fjolt.com/api").then(res => res.json()).then((data) => {
return data;
});
// Now contains a JSON object - assuming one exists
JavaScript Fetch 的選項
由于 Fetch 可以發送和接收 HTTP 請求，當我們想要使用它獲取 URL數據的時候，還可以帶一些選項，即 fetch(URL, { options })。如果你以前使用過 HTTP 請求就會對這很熟悉了。所有可用選項的示例，如下所示：
fetch("https://fjolt.com/", {
body: JSON.stringify({ someData: "value" })
method: 'POST'
mode: 'cors'
cache: 'no-cache'
credentials: 'same-origin'
headers: {
'Content-Type': 'application/json'
},
redirect: 'follow'
referrerPolicy: 'no-referrer'
});
以下是這些選項的具體含義：
- body：包含文本的主體。 在這個例子中，我們發送一些 JSON，它必須被字符串化。
- method：標準的 HTTP 方法。它可以是 POST/GET/DELETE/PUT/CONNECT/PATCH/TRACE/OPTIONS。
- mode：指是否接受跨域請求，它可以是cors/no-cors/same-origin。
- cache：指瀏覽器如何與Cache交互。 它可以是 default/no-cache/reload/force-cache/only-if-cached。
- Credentials：指是否與請求一起發送跨域 Cookie。它可以是include/same-origin/omit。
- Headers：可以包括與請求關聯的任何頭部， 例如HTTP 頭部這里顯示 “Content-Type”，但你也可以擁有自定義 HTTP 頭部。
- Redirect：決定了如果Fetch來的URL重定向會發生什么。它可以是follow/error/manual。
- referrerPolicy：確定請求傳遞的referrer信息量。它可以是 no-referrer/no-referrer-when-downgrade/origin/origin-when-cross-origin/same-origin/strict-origin/strict-origin-when-cross-origin/unsafe-url。
JavaScript:fetch，實現異步請求
當我們使用 Fetch 時，它會轉到我們定義的 URL，收集信息并將響應返回。 這不是即時的，因為加載 URL 并將其取回需要時間。如果我們單獨運行 Fetch，控制臺日志將返回一個 Promise，而不是來自我們想要的 URL 的響應：
let apiResponse = fetch("https://fjolt.com/api");
console.log(apiResponse); // Returns Promise<Pending>
在fetch() 函數運行時，JavaScript并不會等待響應。如果我們想要訪問響應，我們必須明確告訴 JavaScript 需要等待。
等待 fetch() 有兩種方法：
- 可以在 then 循環中使用 then 并操作 fetch() 的響應。
- 可以使用 await，并在使用其內容之前等待 Fetch 返回。
在 JavaScript 中使用 Then 等待Fetch
從fetch()調用中訪問數據的一種方法是將其鏈接到Fetch上，從而允許我們從URL訪問響應。fetch()的內容可以在then()回調函數內操作，但不能在回調函數外操作。例如：
let apiResponse = fetch("https://fjolt.com/api").then(res => res.json()).then((data) => {
console.log(data);
// We can do anything with the data from our api here.
return data;
});
console.log(apiResponse); // This will return Promise<Pending>
// That means we can't use the apiResponse variable
// outside of the then() function.
如果我們想在 then 函數之外使用 fetch() 的內容，則必須使用 await。
在 JavaScript 中使用 Await 等待Fetch
等待Fetch的另一種方法是使用 await 關鍵字。大多數的瀏覽器都支持Top-level awaits,如果你使用的是Node.JS 14.8 之前的版本，你需要將await相關的代碼打包到異步函數中。
如果我們使用 await，可以在函數或代碼的任何地方使用它來獲取 API 的響應，并在其上使用任何響應函數，例如 text() 或 json()。 例如：
// Typically we wrap await in an async function
// But most modern browsers and Node.JS support
// await statements outside of async functions now.
async getAPI() {
let apiResponse = await fetch("https://fjolt.com/api");
let response = apiResponse.json();
// Since we waited for our API to respond using await
// The response variable will return the response from the API
// And not a promise.
console.log(response);
}
getAPI();
結論
本文中，我們介紹了 Fetch 的工作原理、如何通過 fetch() 發送不同的選項，以及如何使用 JavaScript 中的異步概念來等待響應。 fetch() 是 JavaScript 中的一個強大工具，經常在一些優秀項目中發揮重要作用。
譯者介紹
陳豪，51CTO社區編輯，具有6年工作經驗的高級系統工程師。擅長技能有Linux內嵌匯編語言，Python，C，C++，Java，Linux內核分析，智能機器人軟件設計等。
原文標題：??How Fetch Works in JavaScript??，作者：Johnny Simpson
