本文共 3238 字，大约阅读时间需要 10 分钟。

JavaScript的主要优势之一就是任何事情都是异步的。在大多数情况下，不同部分的代码不会影响共他的代码执行。http://www.tuicool.com/articles/qUvI7zV

doALongThing(() => console.log('I will be logged second!'));console.log('I will be logged first!');

不幸的是，这也是JavaScript的一个主要缺点。因为默认情况下一切都是异步的，当你想同步执行代码是它会让我们更加困难。

第一个要解决的问题就是回调。如果你的代码的一部分是依赖于其他的结果，我们将不得不嵌套代码：

doSomething((response) => {      doSomethingElse(response,(secondResponse) => {        doAThirdThing(secondResponse);    });})

在回调中嵌套回调，我们都知道这样不利于维护。所以Promise是一个很好的解决方案。可以更简洁，更扁平的方式处理同步代码。

doSomething()      .then((response) => doSomethingElse(response))    .then((secondResponse) => doAThirdThing(secondResponse));// Even cleanerdoSomething().then(doSomethingElse).then(doAThirdThing);

正如你所看到的，Promise也并不完美。ES2017规范提供另一种方法来处理同步代码，那就是异步函数。这些能让我们编写异步代码就像是写同步代码。

创建一个异步函数

使用 async 函数表达式来定义一个异步函数。下面显示的就是一个基本功能：

async function foo() {      const value = await somePromise();    return value;}

在定义的函数前使用 async ，那这个函数作为一个异步函数。这个关键词可以用于任何函数声明的语法中：

// Basic functionasync function foo() {  … }// Arrow functionconst foo = async () => { … }// Class methodsclass Bar {      async foo() { … }}

一旦定义了一个函数作为一个异步函数，我们就可以使用 await 关键词。这个关键词放在回调的Promise之前，将会暂停执行函数，直到Promise执行或拒绝。

处理错误

异步函数中的错误处理可以使用 try 和 catch 块。第一个块是 try ，让我们尝试一个动作。第二个块 catch ，叫做如果行动失败了。它接受一个paramter，包含抛出的任何错误。

async function foo() {      try {        const value = await somePromise();        return value;    }    catch (err) {        console.log("Oops, there was an error :(");    }}

使用一个异步函数

异步函数并不能真正的替代Promise。但两个可以一起携手合作。一个异步函数将 await 执行一个Promise和一个异步函数始终返回一个Promise。

异步函数返回的Promise将解决任何函数返回的值。

async function foo() {      await somePromise();    return ‘success!’}foo().then((res) => console.log(res)) // ‘success!’

如果抛出一个错误，Promise将拒绝那个错误。

async function foo() {      await somePromise();    throw Error(‘oops!’)}foo()  .then((res) => console.log(res)).catch((err) => console.log(err)) // ‘oops!’

并行执行异步功能

使用Promise时，可以使用 Promise.all() 方法可以并行执行多个Promise。

function pause500ms() {      return new Promise((res) => setTimeout(res, 500));}const promise1 = pause500ms();  const promise2 = pause500ms();Promise.all([promise1, promise2]).then(() => {  console.log("I will be logged after 500ms");});

使用异步函数，我们必须解决位置问题达到一样的效果。如果我们只是在一个序列的 await 函数中执行，他们将按顺序执行，因为 await 将会暂停执行其他函数。

async function inSequence() {      await pause500ms();    await pause500ms();     console.log("I will be logged after 1000ms");}

这将需要 1000ms 才能执行完，因为第二个 await 要等到第一个已经完成才会开始。为了解决这个问题，我们需要参考下面这个函数：

async function inParallel() {      const await1 = pause500ms();    const await2 = pause500ms();    await await1;    await await2;    console.log("I will be logged after 500ms");}

这仅仅需要 500ms 就完成了，因为两个 pause500ms() 函数被同时执行。

Promise或异步函数

正如前面提到的，两个一起使用时，异步函数代替不了Promise。异步函数提供了一种替代方法，和在某些情况下更好的工作方式是基于Promise函数。但是，他仍然使用Promise。

因为返回一个Promise，所以一个异步函数可以由另一个异步函数或Promise调用。我们可以混合使用和根据匹配的语法选择适合的方法。

function baz() {      return new Promise((res) => setTimeout(res, 1000));}async function foo() {      await baz();    return 'foo complete!';}async function bar() {      const value = await foo();    console.log(value);    return 'bar complete!';}bar().then((value) => console.log(value));

接下来将会发生：

• 等待 1000ms
• 打印出“foo complete!”
• 打印出“bar complete!”

Support

在写这篇文章时，异步函数和Promise都可以用在所有主流浏览器（除了IE和Opera Mini）。

转载地址：http://kurni.baihongyu.com/