时间戳

首页 > 解决方案 > 初学者异步/等待问题

javascript - 初学者异步/等待问题

问题描述

我试图理解异步/等待。请找到两个带有问题的屏幕截图作为附件。

对问题1：await 等待释放或拒绝。这个对吗？ 谢谢你的回答。亲切的问候在此处输入图像描述 在此处输入图像描述

标签： javascriptasync-await

解决方案

您的代码的两个版本几乎是等效的。使用关键字声明的任何函数async都会返回一个承诺。

举个例子，下面的函数，尽管看起来没有做任何与 Promise 相关的事情，但会返回一个 Promise：

async function helloWorld() {
    return "Hello World";
}

我们可以通过以下方式验证这一点

> helloWorld().then(result => console.log(result));
Hello World

正如async关键字所暗示的，我们正在指示 JavaScript 运行时它应该异步运行函数。由于函数的调用者在执行类似的操作时需要立即接收结果let result = helloWorld()，因此result包含一个 Promise，该 Promise 最终将解析为的返回值helloWorld()（或者如果helloWorld()抛出错误则被拒绝）。

result = await new Promise...因此，在您的代码中，顶部版本 ( ) 和底部版本 ( )之间几乎没有区别result = new Promise...：在这两种情况下，您的函数asyncData()都将返回一个 Promise，该 Promise 最终会解析为请求数据，或者如果请求失败则拒绝。

有一点不同。在执行的代码的顶级版本中result = await new Promise...，第 23 和 24 行将仅在第 6-22 行之后执行，因此您会在看到“返回承诺”之前看到“Rest call successful”。在底层代码中result = new Promise...，第 23 行将立即执行，因此您将首先看到“Rest call successful”。

造成这种差异的原因是，一条await语句类似于将每一行放在await语句之后的then块中。下面的例子说明了这一点。

async function returnsAPromise() {
    return Promise.resolve("Hello World");
}

// this will log the result first.
async function withAwait() {
    const result = await returnsAPromise();
    console.log(result);
    console.log("rest of function");
}

// this is equivalent to the function above, because of the way await works.
function withEquivalentThen() {
    const result = returnsAPromise();
    result.then(r => {
      console.log(r);
      console.log("rest of function");
    });
}

// this version logs "rest of function" first.
function dontWaitForPromiseThen() {
    const result = returnsAPromise();
    result.then(r => console.log(r));
    console.log("rest of function");

}

推荐阅读