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

Masalahnya terletak pada console.log anda yang pertama kemudian

Respons hanya boleh dibaca sekali Selepas memanggil bolb, json, teks atau beberapa antara muka bacaan lain, bodyUsed respons ditetapkan kepada benar, dan ia tidak boleh dibaca di sini

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

Selepas membacanya dua kali, ia secara semula jadi akan melaporkan ralat bahawa ia telah dibaca
Jadi anda boleh menukar yang pertama kemudian kepada ini

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

Jika anda menukarnya kepada async/menunggu, ia mungkin akan menjadi seperti ini, tetapi ia tidak dijamin betul..

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