java - fetchAPI代替ajax请求为什么不走第二个then而直接走了catch?

Question

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应该怎么写呢？

Answer 1

The problem lies in the console.log of your first then

The response can only be read once. After calling bolb, json, text or several other reading interfaces, the bodyUsed of the response is set to true and it cannot be read here

console.log(response.json()); //第一次读取
return response.json();  //又读取了一次

After reading it twice, it will naturally report an error that it has been read
So you just change the first then to this

    let jsonPromise = response.json()
    console.log(jsonPromise);
    return jsonPromise;

If you change it to async/await, it will probably look like this, but it is not guaranteed to be correct..

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("出错了")
    }
}