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

第一种

  fetch(this.$baseUrl + "/code?appCode=" + item.appCode, {
    method: "GET",
  }).then((res) => { 
    let jsonPromise = res.json()
    console.log(jsonPromise);
    return jsonPromise}
  )
    .then((data) => {
      if (item.appCode == 3) {
        window.open(item.appWebUrl + 'login?userName=' + this.userPermissionInfo.user.userName + '&appCode=' + item.appCode + '&accessCode=' + data.data + '&userMange=' + this.ruleForm.userName)
      }
      window.open(item.appWebUrl + '#/home?userName=' + this.userPermissionInfo.user.userName + '&appCode=' + item.appCode + '&accessCode=' + data.data + '&userMange=' + this.ruleForm.userName)
  }).catch((err) => {

    this.$message.error("获取令牌失败")
  })