Fetch API 提供了一個 JavaScript 接口，用于訪問和操縱 HTTP 管道的一些具體部分盘榨，例如請求和響應(yīng)硬霍。

它還提供了一個全局 fetch() 方法，該方法提供了一種簡單坏快，合理的方式來跨網(wǎng)絡(luò)異步獲取資源铅檩。

這種功能以前是使用 XMLHttpRequest 實現(xiàn)的。

前端老兵莽鸿，公眾號：前端愛好者react開發(fā)利器 之 fetch請求封裝

由于以下原因昧旨，我們在判斷后端返回數(shù)據(jù)時候，如果 HTTP 狀態(tài)碼錯誤祥得，可能判斷比較麻煩兔沃。

當接收到一個代表錯誤的 HTTP 狀態(tài)碼時，從 fetch() 返回的 Promise 不會被標記為 reject级及，即使響應(yīng)的 HTTP 狀態(tài)碼是 404 或 500乒疏。

相反，它會將 Promise 狀態(tài)標記為 resolve（如果響應(yīng)的 HTTP 狀態(tài)碼不在 200 - 299 的范圍內(nèi)饮焦，則設(shè)置 resolve 返回值的 ok 屬性為 false）怕吴，僅當 網(wǎng)絡(luò)故障時或請求被阻止時入偷，才會標記為 reject 。

那么 如何獲取從 fetch() promise 返回的數(shù)據(jù)械哟？

由于涉及到異步問題（試圖以同步方式獲取此異步調(diào)用的結(jié)果）疏之，所以通過 .then 回調(diào)可以解決。

function checkUserHosting(hostEmail, callback) {
    fetch('http://localhost:3001/activities/')
    .then((response) => { 
        // 注意此處
        response.json().then((data) => {
            console.log(data);
            return data;
        }).catch((err) => {
            console.log(err);
        })
    });
}

或者

const checkUserHosting = async (hostEmail, callback) => {
    let hostEmailData  = await fetch(`http://localhost:3001/activities`)
    
    // 注意此處//use string literals
    let hostEmailJson = await hostEmailData.json();
    return hostEmailJson;
}

示例

await fetch('http://localhost:3001/activities', {
    method: 'POST',
    headers: {
    'Accept': 'application/json, */*',
    'Content-Type': 'application/json;charset=UTF-8',
    'cache': 'default',
    },
    'credentials': 'include', //表示請求是否攜帶cookie
    body: JSON.stringify(data)
}).then((response) => {
    response.json().then((data) => {
    if (data.code === 500) errorMessage = data.msg
        return data;
    }).catch((err) => {
        console.log(err);
    })
}).then((data) => {
    console.log('data is', data)
})
.catch(e => {
    pcConsole.log('get postcat client download link error');
});