java - fetchAPI代替ajax请求为什么不走第二个then而直接走了catch?
本文介绍了java - fetchAPI代替ajax请求为什么不走第二个then而直接走了catch?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
var serverUrl = "http://43.254.150.58/b2c-web-cib"; //接口服务器
fetch(serverUrl + '/api/home/mallHome', {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'json={}'
})
.then(function(response){
console.log(response.json());
return response.json();
})
.then(function(data){
console.log(data);
})
.catch(function(e) {
console.log("出错了");
});
console出来的结果是这样的Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
出错了
我能肯定这个请求是成功的,而且展开这个Promise后是有值得,返回的值也正确,那到底哪里出了问题呢?为什么不走第二个then,而直接走了catch呢?
我打印 一下这个catch里的参数e,结果是TypeError: Already read at test.html:19
,意思是我在第一次then的时候已经读取过了
对了,如果我想用async/await
代替Promise
应该怎么写呢?
解决方案
问题出在你第一个then的console.log上
response是只能被读取一次的,当调用了bolb,json,text或者其他几个读取的接口之后,esponse的bodyUsed被设为true,就不能在此读取了
console.log(response.json()); //第一次读取
return response.json(); //又读取了一次
读取了两次,自然就报错已经读取的错误了
所以你把第一个then改成这样就可以了
let jsonPromise = response.json()
console.log(jsonPromise);
return jsonPromise;
改成async/await的话,大概是这样,不保证正确..
let doFetch = async () => {
try {
let resp = await fetch(serverUrl + '/api/home/mallHome', {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'json={}'
})
let json = await resp.json()
} catch (e) {
console.log("出错了")
}
}
这篇关于java - fetchAPI代替ajax请求为什么不走第二个then而直接走了catch?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文