async/await在处理fetch时候结果异步

大魔王
  • 26

代码:

<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)
        })
    }

有两个按钮快速交替点击的时候,数据并不是同步输出的,当我慢慢点击的时候,数据才能正确输出,这是为什么呢

回复
阅读 3.8k
5 个回答

问题解决了,原因是因为多次点击按钮时,后台返回数据的时间不同而导致返回数据没有按照顺序输出

你对 async/await 的理解有问题,代码应该这样写

async do(url) {
    const response = (await fetch(url)).text()
    const data = JSON.parse(response)
    console.log(data)
}

async await 是同步的吗??

这玩意不是 只把异步的写法写的跟同步差不多多吗。。

前端记录
  • 533

我来优化下上面的代码

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

response的text()方法是直接把数据作为文本返回

不过如果结果是json的话 有个json()方法 可以直接把结果转成json

这两个函数返回都是promise 所以前面的答案的那个代码其实有点问题

有时间可以了解一下generator跟co的实现。
很快就能知道async.await会帮你做什么。

宣传栏