JavaScript ES 2017: 通过示例学习Async/Await

时间:2022-05-19 16:25:00

预备知识

ES 2017新增了Asynchronous函数。 在JavaScript中,Async函数本质上是一种处理异步代码的比较简洁的方法。 为了理解这些是什么,以及它们是如何工作的,我们首先需要了解Promise。

如果你不知道Promise是什么,那么你应该先阅读我发表的关于Promise的这篇文章。 在理解Promise之前,你是不会理解JavaScript中的Async/Await。

Async/Await是什么?

  • JavaScript编写异步代码的最新方法
  • 它是非阻塞的(就像Promise和回调)。
  • Async/Await是为了简化使用和编写链接promise的过程。
  • Async/Await返回一个Promise。 如果函数抛出错误,Promise将被拒绝。 如果函数返回值,Promise将被解析。

语法

编写异步函数非常简单。 你只需要在function之前添加async关键字:

// 普通函数
function add(x,y){
  return x + y;
}
// 异步函数
async function add(x,y){
  return x + y;
}

Await

异步函数可以使用await表达式。 这将暂停async函数,并等待Promise解决之后再继续。

示例时间

说够了。 要了解这一切意味着什么,让我们看一个例子! 首先,我们将使用promise来创建一些代码。 一旦我们有了一些工作,我们将使用async/await重写我们的函数,这样你就可以看到它是多么的简单!

如果你使用Google Chrome,请在开发者控制台中输入代码。 您可以按Ctrl + Shift + J(Windows / Linux)或Cmd + Opt + J(Mac)打开控制台。

想想下面的代码:

function doubleAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x * 2);
    }, 2000);
  });
}

在这段代码中,我们有一个叫做doubleAfter2Seconds的函数。 这个函数会以一个数字作为输入,并且在两秒钟后处理,数字加倍。

我们可以调用我们的函数,并传进10来试下。 为了做到这一点,我们将在传入10时调用函数。然后,在promise处理后,我们获取返回值并输出到控制台。 这是这样的:

doubleAfter2Seconds(10).then((r) => {
  console.log(r);
});

真棒!

但是如果我们想通过函数执行不同的值并累加结果? 不幸的是,我们不能将我们的调用加在一起并记录下来:

let sum =   doubleAfter2Seconds(10)
          + doubleAfter2Seconds(20)
          + doubleAfter2Seconds(30);
console.log(sum);
// undefined

上面的代码的问题是它实际上没有等待我们的promise处理就输出到控制台了。

一个可能的解决方案是建立一个promise链。 为此,我们创建一个名为addPromise的新函数。 我们的函数获得输入值,并将返回一个Promise。 以下是示例代码的样子:

function addPromise(x){
  return new Promise(resolve => {
    // 此处为代码   
    // resolve()
  });
}

真棒。 现在我们可以添加我们调用的doubleAfter2Seconds函数。 一旦我们完成了,我们可以用我们新的累加方法来处理了。 在这个例子中,我们应该返回x + 2 * a + 2 * b + 2 * c。 代码如下:

function addPromise(x){
  return new Promise(resolve => {
    doubleAfter2Seconds(10).then((a) => {
      doubleAfter2Seconds(20).then((b) => {
        doubleAfter2Seconds(30).then((c) => {
          resolve(x + a + b + c);
        })
      })
    })
  });
}

让我们再一次一行一行地看下代码。

  • 首先,我们创建了函数addPromise。 这个函数接受一个参数。
  • 接着,我们创建将要返回的新Promise。 请注意,为了简单起见,我们不处理拒绝/错误。
  • 接着,我们首次调用doubleAfter2Seconds,传递值10。两秒钟后,返回20给一个变量。
  • 我们再次调用doubleAfter2Seconds,这次传递的值为20.两秒钟后,返回40给变量b。
  • 我们最后一次调用doubleAfter2Seconds,这次传递的值是30.两秒钟后,返回60给变量c。
  • 最后,我们以10 + 20 + 40 + 60或130的值来处理Promise。

当我们把所有的代码放在一起时,看起来像这样:

function doubleAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x * 2);
    }, 2000);
  });
}

function addPromise(x){
  return new Promise(resolve => {
    doubleAfter2Seconds(10).then((a) => {
      doubleAfter2Seconds(20).then((b) => {
        doubleAfter2Seconds(30).then((c) => {
          resolve(x + a + b + c);
      	})
      })
    })
  });
}

addPromise(10).then((sum) => {
  console.log(sum);
});

从Promise切换到Async/Await

真棒! 现在让我们看看使用Async/Await编写上面的代码将更容易!

删除addPromise函数,并创建一个名为addAsync的新函数。 这个函数与我们的addPromise具有完全相同的用途。 在创建addPromise函数时,使用async关键字。 如下所示:

async function addAsync(x) {
  // code here...
}

现在你已经创建了一个异步函数,我们可以使用await关键字来暂停我们的代码,直到Promise解决。 这是多么容易:

async function addAsync(x) {
  const a = await doubleAfter2Seconds(10);
  const b = await doubleAfter2Seconds(20);
  const c = await doubleAfter2Seconds(30);
  return x + a + b + c;
}

这里是完整的代码:

function doubleAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x * 2);
    }, 2000);
  });
}

async function addAsync(x) {
  const a = await doubleAfter2Seconds(10);
  const b = await doubleAfter2Seconds(20);
  const c = await doubleAfter2Seconds(30);
  return x + a + b + c;
}


addAsync(10).then((sum) => {
  console.log(sum);
});

正如你所看到的,我们仍然使用doubleAfter2Seconds函数。 同样,我们调用addAsync()函数并传入值10。完成后记录结果值。 让我们一步步地过:

  • 首先我们调用addAsync(10)传入10。
  • 接着,我们在第10行获取a的值。由于使用了关键字await,函数暂停了两秒钟,等待Promise处理。 一旦Promise处理了,得到a = 20。
const a = await doubleAfter2Seconds(10);
  • 接着,我们在第11行获取b的值。由于使用了关键字await,函数在等待Promise处理的时候暂停了两秒钟。 一旦Promise处理了,得到b = 40。
const b = await doubleAfter2Seconds(20);
  • 接着,我们在第12行获取c的值。由于使用了关键字await,函数在等待Promise处理的时候暂停了两秒钟。 一旦Promise处理了,得到c = 60。
const c = await doubleAfter2Seconds(30);
  • 最后,我们可以返回x + a + b + c的值。 因为以10作为参数,所以返回10 + 20 + 40 + 60的值。
  • 六秒钟后,console.log(sum)终于运行了。 传入10 + 20 + 40 + 60的值,并将130输出到控制台。

就是这样! 你刚刚用JavaScript中创建了一个异步函数!

正如你所看到的,由于异步函数返回一个Promise,所以它们可以很容易地与Promises交替使用。 当我们使用Async/Await而不是长的Promise链时,我们的代码也更清晰易读。

结束语:

感谢阅读,并希望这是有帮助的。 Async/Await还有很多,包括错误处理,我们在本文中没有涉及到。

如果你仍然无法理解Async/Await是什么,那可能是因为你没有完全理解Promise如何工作。 Promise是理解这个话题的关键。 更多关于Promise的信息可以在这里这里以及这里找到。

如果你准备好最终学习Web开发,请查看6个月内学习全栈Web开发的最终指南

我每周发布4篇关于网站开发的文章。 如果你希望将其添加到每周一次的电子邮件列表中,请考虑在此处输入您的电子邮件,或者在Twitter上关注我。

原文:JavaScript ES 2017: Learn Async/Await by Example