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

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 cleaner
doSomething().then(doSomethingElse).then(doAThirdThing);  

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

创建一个异步函数

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

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

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

// Basic function
async function foo() {  … }

// Arrow function
const foo = async () => { … }

// Class methods
class 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）。

本文根据@Ire Aderinokun的《Asynchronous Functions 101》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处:https://bitsofco.de/asynchronous-functions-101/。

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

如需转载，烦请注明出处：https://www.w3cplus.com/javascript/asynchronous-functions-101.htmlAir Jordan VII 7 Retro Championship