获取 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');
});
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。