Vue 初学者求问一个关于 nextTick 和 async/await 的问题

背景: 后端开发, 对 es6 和 vue 有一定了解, 最近正在折腾研究其原理.

问题概述: 在 async 函数中多执行了一个 nextTick, 导致代码执行时机发生变化

问题详细描述

点击 btn 触发 onClick, onClick 内部先调用 doSomeThing, 然后执行一个 nextTick1, doSomeThing 为 async 函数, 里面 await 了一个 callback(注意 cb 是普通箭头函数), 里面也有一个 nextTick2.

若 nextTick2 执行, 'doSomeThing -- close' 会在 nextTick1 回调('onClick $nextTick done')之后执行
若 nextTick2 不执行, 'doSomeThing -- close' 会在 nextTick1 回调('onClick $nextTick done')之前执行

问题代码预览: https://codepen.io/zymoplastic/pen/XWdrPpj

截取代码如下

<template>
  <button @click="onClick(true)">多执行一个 nextTick</button>
  <button @click="onClick(false)">少执行一个 nextTick</button>
</template>

{
  data() {
    return {}
  },
  methods: {
    async doSomeThing(hasOneMoreTick) {
      let cb = () => {
        console.log('doSomeThing -- cb');
        if (hasOneMoreTick) {
          this.$nextTick(() => {
            console.log('cb $nextTick done');
          })
        }

      }
      await cb();

      console.log('doSomeThing -- close');
      console.log('call destroy');
    },
    onClick(hasOneMoreTick) {
      console.log(`------hasOneMoreTick: ${hasOneMoreTick} begin ------`);
      this.doSomeThing(hasOneMoreTick);

      this.$nextTick(() => {
        console.log('onClick $nextTick done');
        console.log('call destroy');
      })
    }
  }
}

疑问:

这个问题去掉 await 就好了, 但是据我查资料了解, await 后面跟一个函数执行(没有返回 Promise 以及没有 then 属性), 应该是直接返回值, 语义上不应该对执行顺序产生影响
看 Vue 代码发现 nextTick 内部优先使用 Promise 处理, 多调一次只是把 callback 放到了回调队列里面, 等待引擎的主线程执行完后, 在引擎的任务队列里统一处理所有的回调队列, 那为什么多了一个 callback 会对代码执行的顺序有联系?

Zhuzhuchenyan

2020-08-04 18:44:59 +08:00

对以上两个回答都不敢沟通，给题主一个简单的测试环境
async function test() {
let cb = () => {
Promise.resolve().then(() => console.log('awaited'));
};

await cb();
console.log('after await');
}

test();

以上代码加不加 await 对运行结果是有差异的，分别为，
添加 await：awaited，after await
不添加 await：after await，awaited

究其原因是因为当你给一个 function 添加 async 关键字并在其中使用 await 之后，此处就会产生一个 asynchrony context，所以以上代码最后可以理解为以下的等价代码（仅供参考执行顺序，并不完全严谨）
Promise.resolve()
.then(() => {
let cb = () => {
Promise.resolve().then(() => console.log('awaited'));
};

cb();
})
.then(() => console.log('after await'));

所以题主的理解“ await 后面跟一个函数执行(没有返回 Promise 以及没有 then 属性), 应该是直接返回值, 语义上不应该对执行顺序产生影响”并不完全正确

rabbbit

2020-08-04 18:45:36 +08:00

async function a() {
　 await Promise.resolve(2).then(d => {
　　 console.log(d);
　});
　　
　 console.log(1);
}

function b() {
　 a();
　 Promise.resolve(3).then(d => {
　　 console.log(d)　
　})
}　

b(); // 2 3 4 1

// 函数 a, 相当于(大概意思)

function a() {
　 return new Promise((resolve, reject) => {
　　 resolve(
　　　 Promise.resolve(2).then(d => {
　　　　 console.log(d);
　　　})
　　);　
　}).then(() => {　
　　　 console.log(1)
　})　
}

Zhuzhuchenyan

2020-08-04 19:14:07 +08:00

@1490213 我明白你的担忧。仔细看源码，nexttick 维护了一个需要执行回调的队列，在合适得时候通过一个循环同步的执行。

所以第一种情况 A 先加入队列，然后 B 加入队列，在合适的时候执行了 A，此时浏览器根本没有空调用 await 之后的逻辑先执行了 B，然后才有空调用 await 之后的逻辑

第二种情况就比较简单了，你可以试着分析看。await 所带来的 async context （等价为 promise resolve)为什么会先于 next tick （也可以等价为 promise resolve)执行

1490213

2020-08-04 19:33:27 +08:00

@Zhuzhuchenyan 我大致知道了, 源代码里面是直接用的 resolve
```
if (typeof Promise !== 'undefined' && isNative(Promise)) {
const p = Promise.resolve()
timerFunc = () => {
p.then(flushCallbacks)
}
}
```
这个地方就直接加入了主线程栈外的任务队列, 然后后面它调用了 timerFunc, 然后加了一个"锁" pending, 后面再调用 nexttick, 只是往 callbacks 队列里添加内容罢了

然后, await cb() 类似于 `await Promise.resolve(void 0).then(() => { // code behind});`, 把 `code behind` 加入了任务队列
此时主线程栈没有程序执行了, 于是从执行任务队列里面拿内容, 首先执行 nextTick 里面的 flushCallbacks, flushCallbacks 把 nextTick callbacks 里的内容执行了, 然后拿任务队列里面的 `code behind` 来执行