为什么不走ajax,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("出错了")

}

}