問(wèn)題描述

var serverUrl = 'http://43.254.150.58/b2c-web-cib'; //接口服務(wù)器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('出錯(cuò)了');});

console出來(lái)的結(jié)果是這樣的Promise {[[PromiseStatus]]: 'pending', [[PromiseValue]]: undefined}出錯(cuò)了我能肯定這個(gè)請(qǐng)求是成功的，而且展開(kāi)這個(gè)Promise后是有值得，返回的值也正確，那到底哪里出了問(wèn)題呢？為什么不走第二個(gè)then，而直接走了catch呢？我打印 一下這個(gè)catch里的參數(shù)e，結(jié)果是TypeError: Already read at test.html:19，意思是我在第一次then的時(shí)候已經(jīng)讀取過(guò)了

對(duì)了，如果我想用async/await代替Promise應(yīng)該怎么寫呢？

問(wèn)題解答

問(wèn)題出在你第一個(gè)then的console.log上

response是只能被讀取一次的，當(dāng)調(diào)用了bolb,json,text或者其他幾個(gè)讀取的接口之后，esponse的bodyUsed被設(shè)為true，就不能在此讀取了

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

讀取了兩次，自然就報(bào)錯(cuò)已經(jīng)讀取的錯(cuò)誤了所以你把第一個(gè)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('出錯(cuò)了') }}