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/。
大漠
如需转载，烦请注明出处：https://www.w3cplus.com/javascript/asynchronous-functions-101.html