自从Node的7.6版本，已默许支撑async/await特征了。假如你还没有运用过他，或许对他的用法不太相识，这篇文章会通知你为何这个特征“不容错过”。本文辅以大批实例，相信你能很轻松的看懂，并相识Javascript处置惩罚异步的一大杀器。
文章灵感和内容自创了6 Reasons Why JavaScript’s Async/Await Blows Promises Away (Tutorial)，英文好的同砚能够直接戳原版参考。
初识Async/await
关于还不相识Async/await特征的同砚，下面一段是一个“速成”培训。
Async/await 是Javascript编写异步顺序的新要领。以往的异步要领无外乎回调函数和Promise。然则Async/await建立于Promise之上。关于Javascript处置惩罚异步，是个陈词滥调却历久弥新的话题：
从最早的回调函数，到 Promise 对象，再到 Generator 函数，每次都有所改进，但又让人以为不完整。它们都有分外的复杂性，都须要明白笼统的底层运行机制。
异步编程的最高境地，就是基础不必体贴它是不是异步。
async 函数就是隧道终点的亮光，许多人以为它是异步操纵的最终处理计划。
Async/await语法
试想一下，我们有一个getJSON要领，该要领发送一个异步要求JSON数据，并返回一个promise对象。这个promise对象的resolve要领通报异步取得的JSON数据。详细例子的运用以下：
const makeRequest = () =>
getJSON()
.then(data => {
console.log(data)
return "done"
})
makeRequest()
在运用async/await时，写法以下：
const makeRequest = async () => {
console.log(await getJSON())
return "done"
}
makeRequest()
对照两种写法，针对第二种，我须要进一步申明：
1）第二种写法（运用async/await），在主体函数之前运用了async关键字。在函数体内，运用了await关键字。固然await关键字只能涌现在用async声明的函数体内。该函数会隐式地返回一个Promise对象，函数体内的return值，将会作为这个Promise对象resolve时的参数。
能够运用then要领添加回调函数。当函数实行的时刻，一旦碰到await就会先返回，比及异步操纵完成，再接着实行函数体内背面的语句。
2）示例中，await getJSON() 申明console.log的挪用，会比及getJSON()返回的promise对象resolve今后触发。
我们在看一个例子增强一下明白，该例子取自阮一峰大神的《ECMAScript 6 入门》一书：
function timeout(ms) {
return new Promise((resolve) => {
setTimeout(resolve, ms);
});
}
async function asyncPrint(value, ms) {
await timeout(ms);
console.log(value);
}
asyncPrint('hello world', 50);
上面代码指定50毫秒今后，输出hello world。
Async/await终究幸亏那里？
那末，一样是处置惩罚异步操纵，Async/await终究幸亏那里呢？
我们总结出以下6点。
简约而清洁Concise and clean
我们看一下上面两处代码的代码量，就能够直观地看出运用Async/await关于代码量的节约是很显著的。对照Promise，我们不须要誊写.then，不须要新建一个匿名函数处置惩罚相应，也不须要再把数据赋值给一个我们实在并不须要的变量。一样，我们防止了耦合的涌现。这些看似很小的上风实际上是很直观的，鄙人面的代码示例中，将会越发放大。
毛病处置惩罚Error handling
Async/await使得处置惩罚同步＋异步毛病成为了实际。我们一样运用try/catch构造，然则在promises的情况下，try/catch难以处置惩罚在JSON.parse过程当中的题目，原因是这个毛病发生在Promise内部。想要处置惩罚这类情况下的毛病，我们只能再嵌套一层try/catch，就像如许：
const makeRequest = () => {
try {
getJSON()
.then(result => {
// this parse may fail
const data = JSON.parse(result)
console.log(data)
})
// uncomment this block to handle asynchronous errors
// .catch((err) => {
// console.log(err)
// })
}
catch (err) {
console.log(err)
}
}
然则，假如用async/await处置惩罚，统统变得简朴，剖析中的毛病也能易如反掌的处理：
const makeRequest = async () => {
try {
// this parse may fail
const data = JSON.parse(await getJSON())
console.log(data)
}
catch (err) {
console.log(err)
}
}
前提鉴别Conditionals
设想一下如许的营业需求：我们须要先拉取数据，然后依据获得的数据推断是不是输出此数据，或许依据数据内容拉取更多的信息。以下：
const makeRequest = () => {
return getJSON()
.then(data => {
if (data.needsAnotherRequest) {
return makeAnotherRequest(data)
.then(moreData => {
console.log(moreData)
return moreData
})
}
else {
console.log(data)
return data
}
})
}
如许的代码会让我们看的头疼。这这么多层（6层）嵌套过程当中，异常轻易“丧失自我”。
运用async/await，我们就能够易如反掌的写出可读性更高的代码：
const makeRequest = async () => {
const data = await getJSON()
if (data.needsAnotherRequest) {
const moreData = await makeAnotherRequest(data);
console.log(moreData)
return moreData
}
else {
console.log(data)
return data
}
}
中心值Intermediate values
一个经常涌现的场景是，我们先调起promise1，然后依据返回值，挪用promise2，今后再依据这两个Promises得值，调取promise3。运用Promise，我们不难完成：
const makeRequest = () => {
return promise1()
.then(value1 => {
// do something
return promise2(value1)
.then(value2 => {
// do something
return promise3(value1, value2)
})
})
}
假如你难以忍受如许的代码，我们能够优化我们的Promise，计划是运用Promise.all来防止很深的嵌套。
就像如许：
const makeRequest = () => {
return promise1()
.then(value1 => {
// do something
return Promise.all([value1, promise2(value1)])
})
.then(([value1, value2]) => {
// do something
return promise3(value1, value2)
})
}
Promise.all这个要领捐躯了语义性，然则获得了更好的可读性。
然则实在，把value1 & value2一同放到一个数组中，是很“蛋疼”的，某种意义上也是过剩的。
一样的场景，运用async/await会异常简朴：
const makeRequest = async () => {
const value1 = await promise1()
const value2 = await promise2(value1)
return promise3(value1, value2)
}
毛病客栈信息Error stacks
设想一下我们链式挪用了许多promises，一级接一级。紧接着，这条promises链中某处失足，以下：
const makeRequest = () => {
return callAPromise()
.then(() => callAPromise())
.then(() => callAPromise())
.then(() => callAPromise())
.then(() => callAPromise())
.then(() => {
throw new Error("oops");
})
}
makeRequest()
.catch(err => {
console.log(err);
// output
// Error: oops at callAPromise.then.then.then.then.then (index.js:8:13)
})
此链条的毛病客栈信息并没用线索指导毛病究竟涌现在那里。更蹩脚的事，他还会误导开辟者：毛病信息中唯一涌现的函数称号实在基础就是无辜的。
我们再看一下async/await的展示：
const makeRequest = async () => {
await callAPromise()
await callAPromise()
await callAPromise()
await callAPromise()
await callAPromise()
throw new Error("oops");
}
makeRequest()
.catch(err => {
console.log(err);
// output
// Error: oops at makeRequest (index.js:7:9)
})
或许如许的对照，关于在当地开辟阶段区分不是很大。然则设想一下在服务器端，线上代码的毛病日记情况下，将会变得异常有意义。你肯定会以为上面如许的毛病信息，比“毛病出自一个then的then的then。。。”有效的多。
调试Debugging
末了一点，然则也是很主要的一点，运用async/await来debug会变得异常简朴。
在一个返回表达式的箭头函数中，我们不能设置断点，这就会形成下面的局势：
const makeRequest = () => {
return callAPromise()
.then(()=>callAPromise())
.then(()=>callAPromise())
.then(()=>callAPromise())
.then(()=>callAPromise())
}
我们没法在每一行设置断点。然则运用async/await时：
const makeRequest = async () => {
await callAPromise()
await callAPromise()
await callAPromise()
await callAPromise()
}
总结
Async/await是近些年来JavaScript最具革命性的新特征之一。他让读者意想到运用Promise存在的一些题目，并供应了本身来替代Promise的计划。
固然，对这个新特征也有肯定的忧郁，体现在：
他使得异步代码变的不再显著，我们十分困难已学会并习惯了运用回调函数或许.then来处置惩罚异步。新的特征固然须要时候本钱去进修和体味；
退回来讲，熟习C#言语的顺序员肯定会晓得这些进修本钱是完整值得的。
Happy Coding!
PS: 作者Github堆栈，迎接经由过程代码各种形式交换。
