JavaScript 中 Fetch 是如何工作的

譯文精選

作者：陳豪 2022-05-18 08:00:00

開發前端

通過Fetch API，我們可以從 JavaScript 中的 API 和 URL 獲取數據。本文將介紹JavaScript 是如何使用Fetch的。

譯者 | 陳豪

審校 | 梁策孫淑娟

如果我們想從 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

責任編輯：華軒來源： 51CTO