如何使用 Fetch API 在 JavaScript 中發出 HTTP 請求

Fetch API 是一個基於 Promise 的 JavaScript API，用於在瀏覽器中發出異步 HTTP 請求，類似於 XMLHttpRequest (XHR)。與 XHR 不同的是，它是一個簡單乾淨的 API，它使用 Promise 提供更強大、更靈活的功能集來從服務器獲取資源。

Fetch API 現在已經非常標準化，除了 IE 之外的所有現代瀏覽器都支持。如果你需要支持包括 IE 在內的所有瀏覽器，只需在你的項目中添加一個 GitHub 發布的 polyfill 即可。

基本 API 使用

使用 Fetch API 非常簡單。只需將 URL、要獲取的資源的路徑傳遞給 fetch() 方法：

fetch('/js/users.json')
    .then(response => {
        // handle response data
    })
    .catch(err => {
        // handle errors
    });

我們將要檢索的資源的路徑作為參數傳遞給 fetch() .它返回一個將響應傳遞給 then() 的承諾當它完成時。 catch() 如果由於網絡故障或任何其他原因導致請求無法完成，該方法會攔截錯誤。

GET 請求

默認情況下，Fetch API 對異步請求使用 GET 方法。讓我們使用 Reqres REST API 來使用 GET 請求檢索用戶列表：

fetch('https://reqres.in/api/users')
    .then(res => res.json())
    .then(res => {
        res.data.map(user => {
            console.log(`${user.id}: ${user.first_name} ${user.last_name}`);
        });
    });

上述請求在控制台上打印以下內容：

1: George Bluth
2: Janet Weaver
3: Emma Wong

調用 fetch() 方法返回一個承諾。 promise 返回的響應是一個流對象，這意味著當我們調用 json() 方法，它返回另一個承諾。調用 json() 方法表明我們期待一個 JSON 響應。如果您期待 XML 響應，則應使用 text() 方法。

POST 請求

就像 Axios 一樣，Fetch 也允許我們在請求中使用任何其他 HTTP 方法：POST、PUT、DELETE、HEAD 和 OPTIONS。您需要做的就是設置 method 和 body fetch() 中的參數選項：

const user = {
    first_name: 'John',
    last_name: 'Lilly',
    job_title: 'Software Engineer'
};

const options = {
    method: 'POST',
    body: JSON.stringify(user),
    headers: {
        'Content-Type': 'application/json'
    }
}

fetch('https://reqres.in/api/users', options)
    .then(res => res.json())
    .then(res => console.log(res));

Reqres API 將帶有 ID 和創建時間戳的正文數據發回給我們：

{  
   "first_name":"John",
   "last_name":"Lilly",
   "job_title":"Software Engineer",
   "id":"482",
   "createdAt":"2019-05-12T15:09:13.140Z"
}

刪除請求

除了 body 之外，DELETE 請求看起來與 POST 請求非常相似不需要：

const options = {
    method: 'DELETE',
    headers: {
        'Content-Type': 'application/json'
    }
}

fetch('https://reqres.in/api/users/2', options)
    .then(res => {
        if (res.ok) {
            return Promise.resolve('User deleted.');
        } else {
            return Promise.reject('An error occurred.');
        }
    })
    .then(res => console.log(res));

錯誤處理

自 fetch() 方法返回一個承諾，錯誤處理很容易。我們可以使用 catch() promise 的方法來攔截在請求執行期間拋出的任何錯誤。但是，如果請求到達服務器並返回，則無論服務器返回什麼響應，都不會引發錯誤。 fetch() 返回的承諾即使 HTTP 響應碼是 404 或 500 也不會拒絕 HTTP 錯誤。

幸運的是，您可以使用 ok 響應對象的屬性來檢查請求是否成功：

fetch('https://reqres.in/api/users/22') // 404 Error
    .then(res => {
        if (res.ok) {
            return res.json();
        } else {
            return Promise.reject(res.status);
        }
    })
    .then(res => console.log(res))
    .catch(err => console.log(`Error with message: ${err}`));

請求標頭

請求標頭（如 Accept , Content-Type , User-Agent , Referer 等）是任何 HTTP 請求的重要組成部分。 Fetch API 的 Headers 對象允許我們設置、刪除或檢索 HTTP 請求標頭。

我們可以使用 Headers() 創建一個標頭對象構造函數，然後使用 append , has , get , set , 和 delete 修改請求頭的方法：

// create an empty `Headers` object 
const headers = new Headers();

// add headers
headers.append('Content-Type', 'text/plain');
headers.append('Accept', 'application/json');

// add custom headers
headers.append('X-AT-Platform', 'Desktop');
headers.append('X-AT-Source', 'Google Search');

// check if header exists
headers.has('Accept'); // true

// get headers
headers.get('Accept'); // application/json
headers.get('X-AT-Source'); // Google Search

// update header value
headers.set('Content-Type', 'application/json');

// remove headers
headers.delete('Content-Type');
headers.delete('X-AT-Platform');

我們還可以將數組數組或對象字面量傳遞給構造函數來創建頭對象：

// passing an object literal
const headers = new Headers({
    'Content-Type': 'application/json',
    'Accept': 'application/json'
});

// OR

// passing an array of arrays
const headers = new Headers([
    ['Content-Type', 'application/json'],
    ['Accept', 'application/json']
]);

要向請求添加標頭，只需創建一個 Request 實例，並將其傳遞給 fetch() 方法而不是 URL：

const request = new Request('https://reqres.in/api/users', {
    headers: headers
});

fetch(request)
    .then(res => res.json())
    .then(json => console.log(json))
    .catch(err => console.error('Error:', err));

請求對象

Request 對象代表一個資源請求，可以通過調用Request()來創建構造函數：

const request = new Request('https://reqres.in/api/users');

Request object 也接受一個 URL 對象：

const url = new URL('https://reqres.in/api/users');
const request = new Request(url);

通過傳遞 Request 反對 fetch() ，您可以輕鬆自定義請求屬性：

method — HTTP 方法，例如 GET , POST , PUT , DELETE , HEAD
url — 請求的 URL，字符串或 URL 對象
headers — Headers 請求標頭對象
referrer — 請求的引用者（例如，client )
mode — 跨域請求的模式（例如，cors , no-cors , same-origin )
credentials — cookie 和 HTTP-Authorization 標頭是否應該與請求一起使用？（例如，include , omit , same-origin )
redirect — 請求的重定向模式（例如，follow , error , manual )
integrity — 請求的子資源完整性值
cache — 請求的緩存模式（例如，default , reload , no-cache )

讓我們創建一個 Request 具有一些自定義屬性和正文內容的對像以發出 POST 請求：

const user = {
    first_name: 'John',
    last_name: 'Lilly',
    job_title: 'Software Engineer'
};

const headers = new Headers({
    'Content-Type': 'application/json',
    'Accept': 'application/json'
});

const request = new Request('https://reqres.in/api/users', {
    method: 'POST',
    headers: headers,
    redirect: 'follow',
    mode: 'cors',
    body: JSON.stringify(user)
});

fetch(request)
    .then(res => res.json())
    .then(json => console.log(json))
    .catch(err => console.error('Error:', err));

只有第一個參數 URL 是必需的。所有這些屬性都是只讀的，這意味著一旦創建請求對象就不能更改它們的值。 Fetch API 並不嚴格要求 Request 目的。對象字面量，我們傳遞給 fetch() 方法，作用類似於 Request 對象：

fetch('https://reqres.in/api/users', {
    method: 'POST',
    headers: headers,
    redirect: 'follow',
    mode: 'cors',
    body: JSON.stringify(user)
}).then(res => res.json())
    .then(json => console.log(json))
    .catch(err => console.error('Error:', err));

響應對象

Response fetch() 返回的對象方法包含有關請求和網絡請求響應的信息，包括標頭、狀態碼和狀態消息：

fetch('https://reqres.in/api/users')
    .then(res => {
        // get response headers
        console.log(res.headers.get('content-type'));
        console.log(res.headers.get('expires'));

        // HTTP response status code 
        console.log(res.status);

        // shorthand for `status` between 200 and 299 
        console.log(res.ok); 

        // status message of the response e.g. `OK`
        console.log(res.statusText);

        // check if there was a redirect
        console.log(res.redirected);

        // get the response type (e.g., `basic`, `cors`)
        console.log(res.type);

        // the full path of the resource
        console.log(res.url);
    });

響應正文可通過以下方法訪問：

json() 將正文作為 JSON 對象返回
text() 以字符串形式返回正文
blob() 將主體作為 Blob 對象返回
formData() 將正文作為 FormData 對象返回
arrayBuffer() 將主體作為 ArrayBuffer 對象返回

所有這些方法都返回一個承諾。這是 text() 的示例方法：

fetch('https://reqres.in/api/unknown/2')
    .then(res => res.text())
    .then(res => console.log(res));

上述網絡調用的輸出將是一個 JSON 字符串：

'{"data":{"id":2,"name":"fuchsia rose","year":2001,"color":"#C74375","pantone_value":"17-2031"}}'

獲取和 Cookies

默認情況下，當您使用 Fetch 獲取資源時，請求不包含 cookie 等憑據。如果要發送 cookie，則必須顯式啟用如下憑據：

fetch(url, {
  credentials: 'include'
})

獲取和異步/等待

由於 Fetch 是一個基於 Promise 的 API，我們可以更進一步，使用最新的 ES2017 async/await 語法，讓我們的代碼更加簡單和同步：

const fetchUsers = async () => {
    try {
        const res = await fetch('https://reqres.in/api/users');
        if (!res.ok) {
            throw new Error(res.status);
        }
        const data = await res.json();
        console.log(data);
    } catch (error) {
        console.log(error);
    }
}

fetchUsers();

結論

這就是 JavaScript Fetch API 的介紹。這是對 XMLHttpRequest 的巨大改進具有簡單、優雅且易於使用的界面。 Fetch 非常適合獲取網絡資源（甚至在服務工作者內部的網絡中）。所有現代瀏覽器都支持 Fetch API，因此除非您想支持 IE，否則無需使用任何 polyfill。

使用 JavaScript 支付請求 API

如何使用 HTML5 語音合成 API 添加文本轉語音

如何使用 Fetch API 在 JavaScript 中發出 HTTP 請求

基本 API 使用

GET 請求

POST 請求

刪除請求

錯誤處理

請求標頭

請求對象

響應對象

獲取和 Cookies

獲取和異步/等待

結論

在 Nuxt 頁面中包含以 $ 開頭的 Javascript 片段 - 返回 this.$ 不是函數

在 React js 中構建字典應用程序

如何將兩個 Javascript 對象合併為一個？

如何使用 Netlify 的 Serverless Functions 從前端應用程序中的環境變量訪問 API 密鑰

如何使用 Nginx 在單個 DigitalOcean droplet 上部署 React JS 和 Node.js 應用程序

在 SuperTest 中使用 Async-Await

用 Reactjs / Nextjs 用 Tailwind 設計你的第一個應用程序

7.13.0 發布：記錄和元組、粒度編譯器假設和頂級目標

高級 VueMaterial 主題

Piral #6 的新功能

使用 NodeJS 簽名的公鑰私鑰簽名 JWT 保護 C#/.NET WebAPI

ElectronJS 快速入門

Lambda 處理程序的異步初始化

漸進式 Web 應用程序：漫長的遊戲

使用 JavaScript 破解 Google 表格

無組件：低代碼時代的架構模式。

如何在 Next JS 中使用 React Hook 表單創建表單：React 教程

我是如何製作我的第一個全棧應用程序並獲得哈佛大學認證的，以及你是如何做到的。