想浏览更多优良文章请猛戳GitHub博客,一年百来篇优良文章等着你！
ES8 引入的 async/await 在 JavaScript 的异步编程中是一个极好的革新。它供应了运用同步款式代码异步接见 resoruces 的体式格局，而不会壅塞主线程。但是，它们也存在一些坑及题目。在本文中，将从差别的角度讨论 async/await，并演示怎样准确有效地运用这对兄弟。
前置学问
async 作用是什么
从 MDN 能够看出：
async 函数返回的是一个 Promise 对象。async 函数（包括函数语句、函数表达式、Lambda表达式）会返回一个 Promise 对象，假如在函数中 return 一个直接量，async 会把这个直接量经由过程 Promise.resolve() 封装成 Promise 对象。
假如 async 函数没有返回值， 它会返回 Promise.resolve(undefined)。
await 作用是什么
从 MDN 相识到：
await 守候的是一个表达式，这个表达式的盘算效果是 Promise 对象或许别的值（换句话说，await 能够等恣意表达式的效果）。
假如它比及的不是一个 Promise 对象，那 await 表达式的运算效果就是它比及的东西。
假如它比及的是一个 Promise 对象，await 就忙起来了，它会壅塞背面的代码，等着 Promise 对象 resolve，然后获得 resolve 的值，作为 await 表达式的运算效果。
这就是 await 必需用在 async 函数中的缘由。async 函数挪用不会形成壅塞，它内部一切的壅塞都被封装在一个 Promise 对象中异步实行。
async/await 的长处
async/await 带给我们的最主要的优点是同步编程作风。让我们看一个例子：
很显著，async/await 版本比 promise 版本更轻易明白。假如疏忽 await 关键字，代码看起来就像任何其他同步言语，比方 Python。
最好的处所不仅在于可读性。async/await 到今天为止，一切主流浏览器都完全支撑异步功用。
当地浏览器的支撑意味着你没必要转换代码。更主要的是，它便于调试。当在函数进口点设置断点并跨过 await 行时，将看到调试器在 bookModel.fetchAll() 实行其使命时停息少焉，然后它将移动到下一个.filter 行,这比 promise 代码要简朴很多，在 promise 中，必需在 .filter 行上设置另一个断点。
另一个不太显著的长处是 async 关键字。 async声明 getBooksByAuthorWithAwait()函数返回值确保是一个 promise，因而挪用者能够安全地运用 getBooksByAuthorWithAwait().then(...) 或await getBooksByAuthorWithAwait()。 想一想下面的例子（不好的做法！）：
在上述代码中，getBooksByAuthorWithPromise 能够返回 promise(一般状态下)或 null 值(非常状态下)，在非常状态下，挪用者不能挪用 .then()。有了async 声明，这类状态就不会涌现了。
async/await 能够会发生误导
一些文章将 async/wait 与 Promise 进行了比较，并宣称它是 JavaScript 下一代异步编程作风，对此作者深表贰言。async/await 是一种革新，但它只不过是一种语法糖，不会完全转变我们的编程作风。
从实质上说，async 函数依然是 promise。在准确运用 async 函数之前，你必需先相识 promise，更蹩脚的是，大多数时刻你须要在运用 promises 的同时运用 async 函数。
斟酌上面示例中的 getBooksByAuthorWithAwait() 和getbooksbyauthorwithpromise() 函数。请注重，它们不仅功用雷同，而且具有完全雷同的接口!
这意味着 getbooksbyauthorwithwait() 将返回一个 promise，所以也能够运用 .then(...)体式格局来挪用它。
嗯，这未必是件坏事。只需 await 的名字给人一种以为，“哦，太好了，能够把异步函数转换成同步函数了”，这现实上是毛病的。
async/await
那末在运用 async/await 时能够会犯什么毛病呢?下面是一些罕见的例子。
太甚串行化
只管 await 能够使代码看起来像是同步的，但现实它们依然是异步的，必需警惕防止太甚串行化。
上述代码在逻辑上看似准确的，但是，这是毛病的。
-
await bookModel.fetchAll()会守候fetchAll()直到fetchAll()返回效果。 - 然后
await authorModel.fetch(authorId)被挪用。
注重，authorModel.fetch(authorId) 并不依靠于 bookModel.fetchAll() 的效果，现实上它们能够并行挪用！但是，用了 await，两个挪用变成串行的，总的实行时间将比并行版本要长很多很多。
下面是准确的体式格局：
更蹩脚的是，假如你想要一个接一个地猎取项目列表，你必需依靠运用 promises:
简而言之，你依然须要将流程视为异步的，然后运用 await 写出同步的代码。在庞杂的流程中，直接运用 promise 能够更轻易。
毛病处置惩罚
在 promise中，异步函数有两个能够的返回值: resolved 和 rejected。我们能够用 .then() 处置惩罚一般状态，用 .catch() 处置惩罚非常状态。但是，运用 async/await体式格局的，毛病处置惩罚能够比较辣手。
try…catch
最规范的(也是作者引荐的)要领是运用 try...catch 语法。在 await 挪用时，在挪用 await 函数时，假如涌现非一般状态就会抛出非常,await 敕令背面的 promise 对象，运转效果多是 rejected，所以最好把await 敕令放在 try...catch 代码块中。以下例子:
在捕捉到非常以后，有几种要领来处置惩罚它：
- 处置惩罚非常，并返回一个一般值。(不在
catch块中运用任何return语句相称于运用return undefined，undefined 也是一个一般值。) - 假如你想让挪用者处置惩罚它，你能够直接抛出一般的毛病对象，如
throw errorr，它许可你在 promise 链中运用async getBooksByAuthorWithAwait()函数(也就是说，能够像getBooksByAuthorWithAwait().then(…).catch(error => …) 处置惩罚毛病); 或许能够用Error对象将毛病封装起来，如throw new Error(error)，当这个毛病在掌握台中显现时，它将给出完全的客栈跟踪信息。 - 谢绝它，就像
return Promise.reject(error)，这相称于throw error，所以不发起如许做。
运用 try...catch 的优点：
- 简朴,传统。只需有Java或c++等其他言语的履历，明白这一点就不会有任何难题。
- 假如不须要每步实行毛病处置惩罚，你依然能够在一个
try ... catch块中包装多个await挪用来处置惩罚一个处所的毛病。
这类要领也有一个缺点。由于 try...catch 会捕捉代码块中的每一个非常，所以一般不会被 promise 捕捉的非常也会被捕捉到。比方：
运转此代码，你将获得一个毛病 ReferenceError: cb is not defined。这个毛病是由console.log()打印出来的的，而不是 JavaScript 自身。偶然这多是致命的:假如 BookModel 被包括在一系列函数挪用中，个中一个挪用者吞噬了毛病，那末就很难找到如许一个未定义的毛病。
让函数返回两个值
另一种毛病处置惩罚要领是遭到Go言语的启示。它许可异步函数返回毛病和效果。概况请看这篇博客文章:
How to write async await without try-catch blocks in Javascript
简而言之，你能够像如许运用异步函数:
[err, user] = await to(UserModel.findById(1));
作者个人不喜欢这类要领，由于它将 Go 言语的作风带入到了 JavaScript 中，以为不自然。但在某些状态下，这能够相称有效。
运用 .catch
这里引见的末了一种要领就是继承运用 .catch()。
追念一下 await 的功用:它将守候 promise 完成它的事情。值得注重的一点是 promise.catch() 也会返回一个 promise ，所以我们能够如许处置惩罚毛病:
这类要领有两个小题目:
- 它是 promises 和 async 函数的混合体。你依然须要明白 是promises 怎样事情的。
- 毛病处置惩罚先于一般途径，这是不直观的。
结论
ES7引入的 async/await 关键字无疑是对J avaScrip t异步编程的革新。它能够使代码更轻易浏览和调试。但是，为了准确地运用它们，必需完全明白 promise，由于 async/await 只不过是 promise 的语法糖，实质上依然是 promise。
原文：
https://hackernoon.com/javasc…
你的点赞是我延续分享好东西的动力，迎接点赞！
交换
干货系列文章汇总以下，以为不错点个Star，迎接 加群 互相进修。
我是小智，民众号「大迁天下」作者，对前端手艺坚持进修爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！
关注民众号，背景复兴福利，即可看到福利，你懂的。
