如何获取 fetch 返回数据

获取 fetch 返回数据

Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。

它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

这种功能以前是使用 XMLHttpRequest 实现的。

由于以下原因，我们在判断后端返回数据时候，如果 HTTP 状态码错误，可能判断比较麻烦。

当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject，即使响应的 HTTP 状态码是 404 或 500 。

相反，它会将 Promise 状态标记为 resolve（如果响应的 HTTP 状态码不在 200 - 299 的范围内，则设置 resolve 返回值的 ok 属性为 false），仅当 网络故障时或请求被阻止时，才会标记为 reject 。

那么 如何获取从 fetch() promise 返回的数据？

由于涉及到异步问题（试图以同步方式获取此异步调用的结果），所以通过 .then 回调可以解决。

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');
});