请问老师，期望按顺序执行，这样写行不通，不明白因为什么？

Question

基于React实现的。期望输出顺序：ABCD，结果是：DABC。感觉await没起作用。
下面是源码实现：

// 组件第一次渲染完成
async componentDidMount() {
await this.getMockData(’/mock/a.json’)
await this.getMockData(’/mock/b.json’)
await this.getMockData(’/mock/c.json’)
// 期望最后执行
await setTimeout(() => {
new Promise((resolve) => {
resolve()
}).then(() => {
console.log(‘我是D’)
})
})
}
// 测试async await
getMockData(url) {
new Promise(resolve => {
axios.get(url).then(function(res){
resolve(res)
})
}).then((res) => {
console.log(res.data.name)
})
}

Answer 1

谢成 2021-04-04 09:43:35

上面的代码中，setTimeout前面的await是有问题的，setTimeout是宏任务会先执行。

下面红色框中的代码是没问题的，可以让abc按照顺序执行。

因为我不知道你要实现的场景是什么样的，但读取完文件为什么下面还要加一个setTimeout然后再里面执行promise呢。我觉得是不是可以仔细梳理下应用场景，把setTimeout下面的操作也写成async/await形式。

• 提问者 慕桂英0185571 #1

  非常感谢！

• 提问者 慕桂英0185571 #2

  这里实现场景是，拿到后台数据后，在setTimeout里面想要使用这些数据渲染图表。因为不止一个接口，所以我获取数据和渲染图表，都单独封装了。因此想依次执行。
  不用async的话，目前我想到的解决办法只能是把渲染图表的方法放在ajax获取后台数据尽可能用时最长的成功函数里。
  另外想请教一下老师，Ajax操作总是在最后执行吗？感觉怎么写，都是先执行输出D（D不是Ajax操作）

• 谢成 回复 提问者 慕桂英0185571 #3

  意思是不是abc三个请求数据都得到后，再把这三个请求回来的数据放到图表中展示。这样的话目前abc都是await就可以实现，然后在这三个await的下面来写图表的代码就可以，应该不需要setTimeout。setTimeout是宏任务会先执行。