javascript - 有人可以用 async/await 向我解释以下内容吗？

Question

有人可以深入解释一下这段代码吗？

const promiseFactory = () =>
  new Promise(resolve => setTimeout(() => resolve(1), 5000));

如果我用以下内容调用它:

const consumer = async() => {
  promiseFactory().then(s => console.log(s));
  console.log("next step");
}

5秒后将输出“下一步”但如果我用以下方式调用它，

const consumer = async() => {
  const val = await promiseFactory();
  console.log(val);
  console.log("next step");
}

会输出1然后“下一步”那么到底 Promise 和 async/await 不仅仅是语法差异？

Answer 1

const consumer = async() => {
promiseFactory().then(s => console.log(s));
  console.log("next step");
}

1. 您调用promiseFactory
2. 您调用 `console.log("下一步");
3. 在未来的某个时刻，promise 会得到解决，您会调用 console.log(s)

const consumer = async() => {
  const val = await promiseFactory();
  console.log(val);
  console.log("next step");
}

1. 您可以promiseFactory
2. 在未来的某个时刻，promise 会得到解决，您调用 console.log(val)，然后调用 console.log("next step")

<小时/>

So in the end promises and async/await are not just a syntax difference?

它们本质上是，您只是没有编写等效的代码。

您使用 async 和 await 相当于:

const consumer = async () => {
    promiseFactory().then(s => {
        console.log(s);
        console.log("next step");
    );
};

在 then 回调中的 await 之后的所有代码，而不仅仅是下一行。

您使用 then 相当于:

const consumer = async() => {
  doAsyncStuff();
  console.log("next step");
}

const doAsyncStuff = async () {
    const s = await promiseFactory();
    console.log(s)
}