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

Le problème réside dans le console.log de votre premier puis

La réponse ne peut être lue qu'une seule fois. Après avoir appelé bolb, json, text ou plusieurs autres interfaces de lecture, le bodyUsed de la réponse est défini sur true, et il ne peut pas être lu ici

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

Après l'avoir lu deux fois, il signalera naturellement une erreur indiquant qu'il a été lu
Vous pouvez donc remplacer le premier par celui-ci

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

Si vous le changez en async/await, cela ressemblera probablement à ceci, mais ce n'est pas garanti qu'il soit 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("出错了")
    }
}