关于前端:如何获取-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');
});