鍍金池/ 問(wèn)答/HTML/ async/await在處理fetch時(shí)候結(jié)果異步

async/await在處理fetch時(shí)候結(jié)果異步

代碼：

<button>1</button>
<button>2</button>
    async do(url){
        await fetch(url)
        .then(function(response){
            return response.text()
        }).then(function(data){
            let data = JSON.parse(data)
            console.log(data)
        })
    }

有兩個(gè)按鈕快速交替點(diǎn)擊的時(shí)候，數(shù)據(jù)并不是同步輸出的，當(dāng)我慢慢點(diǎn)擊的時(shí)候，數(shù)據(jù)才能正確輸出，這是為什么呢

回答
編輯回答
尐潴豬

async await 是同步的嗎？？

這玩意不是 只把異步的寫(xiě)法寫(xiě)的跟同步差不多多嗎。。

2018年5月9日 13:10
編輯回答
久愛(ài)她

你對(duì) async/await 的理解有問(wèn)題,代碼應(yīng)該這樣寫(xiě)

async do(url) {
    const response = (await fetch(url)).text()
    const data = JSON.parse(response)
    console.log(data)
}
2017年2月2日 23:32
編輯回答
失心人

我來(lái)優(yōu)化下上面的代碼

async do(url) {
    const response = await fetch(url);
    const data = await response.json();  
    console.log(data)
}

response的text()方法是直接把數(shù)據(jù)作為文本返回

不過(guò)如果結(jié)果是json的話 有個(gè)json()方法 可以直接把結(jié)果轉(zhuǎn)成json

這兩個(gè)函數(shù)返回都是promise 所以前面的答案的那個(gè)代碼其實(shí)有點(diǎn)問(wèn)題

2018年5月25日 23:46
編輯回答
陌離殤

有時(shí)間可以了解一下generator跟co的實(shí)現(xiàn)。
很快就能知道async.await會(huì)幫你做什么。

2017年2月6日 08:36
編輯回答
傲嬌范

問(wèn)題解決了，原因是因?yàn)槎啻吸c(diǎn)擊按鈕時(shí)，后臺(tái)返回?cái)?shù)據(jù)的時(shí)間不同而導(dǎo)致返回?cái)?shù)據(jù)沒(méi)有按照順序輸出

2018年7月21日 16:44