这篇文章翻译自 ASYNC/AWAIT WILL MAKE YOUR CODE SIMPLER,这是一篇写于2017年八月的文章，并由某专栏提名为17年十大必读文章。在掘金上没找到这篇文章的翻译（其实没仔细找），就想试着本身翻译一下。翻译的欠好的处所，还望大家指出，针对我程度就好不要质疑掘金的程度（上次文章评论铭心镂骨￣▽￣），感谢。

[翻译] Async/Await 使你的代码更简洁 或者说，我如何学习不使用回调函数并且爱上ES8

有时，现代JavaScript项目会脱离我们的掌控。此中一个主要的罪魁祸首就是杂乱的措置惩罚惩罚异步的任务，导致写出了又长又庞大又深层嵌套的代码块。JavaScript此刻供给了一个新的措置惩罚惩罚这些操纵的语法，他甚至能把最错综庞大的操纵转化成为简洁而且可读性高的代码

配景 AJAX (Asynchronous JavaScript And XML)

首先来进行一点科普。 在90年代末期， Ajax是异步JavaScript的第一个重大打破。 这个技术可以让网站在html加载之后获取和展示新的数据。对付其时大部分网站的那种需要从头下载整个个页面来展示一个部分内容的更新来说，它是革命性的创新。这项技术（在jQuery中通过绑缚成为帮助函数而闻名）在整个21世界主导了web开发，同时ajax在今天也是网站用来检索数据的主要技术，但xml却被json大规模的代替

NodeJS

当NodeJS在2009年第一次颁布的时候，处事真个一个主要的存眷点就是允许措施优雅的措置惩罚惩罚并发。其时大部分的处事端语言使用梗阻代码完成的这种方法来措置惩罚惩罚I/O操纵，直到它结束措置惩罚惩罚I/O操纵之后再继续进行之前的代码运行。取而代之，NodeJS操作事件循环体系，使用了一种类似ajax语法的事情方法:一旦非梗阻的异步操纵完成之后，就可以让开发者分配的回调函数被触发。

Promises

几年之后，一个新的叫做“promises”的标准呈此刻nodejs和浏览器环境中，他供给了一套更强大也更标准化的方法去构建异步操纵。promises 仿照照旧使用基于回调的格局，但是为异步操纵的链式挪用和构建供给了统一的语法。promises，这种由风行的开源库所缔造的标准，最终在2015年被插手了原生JavaScript。

promises虽然是一个重大的改造，但仿照照旧会在某些情况下孕育产生冗长难读的代码。

此刻，我们有了一个新的解决方案。

async/await 是一种允许我们像构建没有回调函数的普通函数一样构建promises的新语法（从 .net和c#借鉴而来）。 这个是一个极好的JavaScript的增加成果，在去年被加进了JavaScript ES7,它甚至可以用来简化几乎所有现存的js应用。

Examples

我们将会举几个例子。

这些代码例子不需要加载任何的三方库。**Async/await 已经在在最新版本的chrome，Firefox，Safari，和edge 获得全面撑持，所以你可以在浏览器的控制台中试着运行这些示例。**别的，async/await 语法可以在Node的7.6版本及其以上运行， Babel 以及TypeScript 也同样撑持async/await 语法。Async和await 如今完全可以在任何JavaScript项目中使用

Setup

如果你想在你的电脑上跟从我们的脚步探寻async，我们就将会使用这个虚拟的API Class。这个类通过返回promise东西来模拟网络的挪用的过程，并且这些promise东西将会在被挪用的200ms之后使用resolve函数将简单的数据作为参数通报出去。

class Api { constructor () { this.user = { id: 1, name: 'test' } this.friends = [ this.user, this.user, this.user ] this.photo = 'not a real photo' } getUser () { return new Promise((resolve, reject) => { setTimeout(() => resolve(this.user), 200) }) } getFriends (userId) { return new Promise((resolve, reject) => { setTimeout(() => resolve(this.friends.slice()), 200) }) } getPhoto (userId) { return new Promise((resolve, reject) => { setTimeout(() => resolve(this.photo), 200) }) } throwError () { return new Promise((resolve, reject) => { setTimeout(() => reject(new Error('Intentional Error')), 200) }) } }

每个例子将会按挨次执行不异的三个操纵：检索一个用户，检索他们的伴侣，以及检索他们的照片。最后，我们将在控制台输出上述的三个功效。

第一个测验考试-嵌套的promise回调函数

下面是使用嵌套的promise回调函数的实现要领

function callbackHell () { const api = new Api() let user, friends api.getUser().then(function (returnedUser) { user = returnedUser api.getFriends(user.id).then(function (returnedFriends) { friends = returnedFriends api.getPhoto(user.id).then(function (photo) { console.log('callbackHell', { user, friends, photo }) }) }) }) }