async/await内执行顺序

前言

有好久没写博客了，主要是时间不够加上自己技术不够，最近开始校招。所以准备用写博客来总结一些技术点。今天在网上看到有人问到关于async/await 内的执行问题，所以自己看了一下官方文档。

正文

先贴出代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>async/await</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <button @click="getResult">test promise</button>
        <button @click="getResult2">test async</button>
    </div>

    <script>
        new Vue({
            el: '#app',
            methods: {
                // setTimeout模拟网络延时
                getFoo() {
                    return new Promise((resolve, reject) => {
                        setTimeout(() => {
                            resolve()
                        }, 5000)
                    })
                },
                getBar() {
                    return new Promise((resolve, reject) => {
                        setTimeout(() => {
                            resolve()
                        }, 10000)
                    })
                },

                // 先弹窗getBarSuccess后弹窗getFooSuccess
                // 即哪个请求先resolve则哪个callback先被执行
                getResult() {
                    this.getFoo().then(res => {
                        alert('getFooSuccess')
                    })
                    this.getBar().then(res => {
                        alert('getBarSuccess')
                    })
                },
                // 总是弹窗getFooSuccess后弹窗getBarSuccess，
                // 虽然barPromise早已经是resolve状态了，但是无法让他后面的alert('getBarSuccess')先执行
                async getResult2() {
                    const fooPromise = this.getFoo()
                    const barPromise = this.getBar()
                    const getsa = this.getsa()
          
                    await fooPromise
  					console.log('getFooSuccess')
                    await barPromise
                    console.log('getBarSuccess')
                }
            }
        })
        （resolved）
    </script>
</body>

</html>

如图所示点击test promise按钮getBarSuccess先出，可是点击test async按钮确是getFooSuccess先出。这肯定是async函数有问题。所以查看了文档：


var resolveAfter2Seconds = function() {
  console.log("starting slow promise");
  return new Promise(resolve => {
    setTimeout(function() {
      resolve(20);
      console.log("slow promise is done");
    }, 2000);
  });
};

var resolveAfter1Second = function() {
  console.log("starting fast promise");
  return new Promise(resolve => {
    setTimeout(function() {
      resolve(10);
      console.log("fast promise is done");
    }, 1000);
  });
};

var concurrentStart = async function() {
  console.log('==CONCURRENT START with await==');
  const slow = resolveAfter2Seconds(); // 立即启动计时器
  const fast = resolveAfter1Second();

  console.log(await slow);
  console.log(await fast); // 等待 slow 完成, fast 也已经完成。
}

concurrentStart()     输出“slow”，然后输出“fast”

在 concurrentStart中，两个计时器均被创建，然后一起被await。这两个计时器同时运行的，但await的调用仍然是按顺序运行的，这意味着第二个await会等到第一个await运行结束。这使得代码完成运行只需要2秒，而不是3秒。这2秒是由最慢的计时器决定的。
从上可以看出，async内的代码为顺序执行，async函数是由最慢的计时器决定的，但是应为顺序执行所以还是先输出“slow”，然后输出“fast”。

总结

所以前面的问题是因为async函数不对，应该把两个promise函数改为并发，才能达到效果。

async/await内执行顺序

前言

正文

总结

猜你喜欢