本文开始先通过介绍 Promise 和 Async/Await 的介绍和详细用法，然后再根据实战中的注意事项，方便大家理解和使用。
一、Async/Await 出现的原因
在 ES7 之前，了解到 Promise 是 ES6 为了解决异步回调而产生的解决方案，避免出现回调地狱( Callback Hell )，那么 ES7 为什么又提出了新的 Async/Await 标准？
问题答案就是：Promise 虽然解决了异步嵌套的怪圈，使用表达清晰的链式表达；但是如果在实际开发过程中有些地方有大量的异步请求的时候，而且流程复杂嵌套的情况下，检查相关代码会发现一个比较尴尬的情景，到处都是 then，查阅和修改起来比较费神费力，因此 ES7 提出新的 Async/Await 标准就是为了解决这种尴尬情形的。
但是在介绍 Async/Await 之前，首先来详细深入的了解一下 Promise 的相关内容。
二、Promise 相关的内容
2.1 Promise 诞生的背景
是 ES6 里面的新技术，为的是解决异步回调地狱问题。
2.1.1 回调地狱( Callback Hell)
也叫回调嵌套或者函数混乱的调用，通俗点讲就是：需要发送三个网络请求，第三个请求依赖第二个请求的结果，第二个请求依赖第一个请求的结果。不断增加的嵌套使用。
2.1.2 回调函数的弊病
开发者阅读起来很费神、吃力，不利于排查错误，更不能直接 return，等等。如：
setTimeout(() => {
console.log(1)
setTimeout(() => {
console.log(2)
setTimeout(() => {
console.log(3)
},3000)
},2000)
},1000)
2.1.3 常用回调函数
使用场景有：网络请求、事件的监听、定时器等，常见回调函数有：AJAX、计时器、fs 等。
2.1.4 Promise 解决异步回调地狱方法
针对上述回调函数使用遇到的弊端，Promise 就是为解决此问题而生的，如下所示：
function f1() {
return new Promise((resolve, reject) => {
setTimeout(() => resolve(11), 1000);
}).then(data => console.log(data));
}
function f2() {
return new Promise((resolve, reject) => {
setTimeout(() => resolve(22), 2000);
}).then(data => console.log(data));;
}
function f3() {
return new Promise((resolve, reject) => {
setTimeout(() => resolve(33), 3000);
}).then(data => console.log(data));;
}
f1().then(f2).then(f3)
2.2 什么是 Promise
Promise 是什么？不知道作为前端开发的你能否正确的说出 Promise 的学术概念，如果说不出来也不要紧，直接看下面解释。
2.2.1 Promise 对象
Promise 是一个对象，从其中可以获取异步操作的消息，可以说它更像是一个容器，保存着将来才会结束的事件（也就是一个异步操作）。
Promise 对象其实表示是一个异步操作的最终成败，以及结果值，也就是一个代理值，是 ES6 中的一种异步回调解决方案。
2.2.2 Promise 的语法定义
Promise 是一个构造函数，用来生成 Promise 的实例对象。
2.2.3 Promise 的功能定义
Promise 对象用来包裹一个异步操作，并且获取操作成功和失败的结果值。
2.3 Promise 的三种状态
Promise 对象代理的值其实是未知的，状态是动态可变的，因此 Promise 对象的状态有三种：进行中、结束、失败，它运行的时候，只能从进行中到失败，或者是从进行中到成功。使用 Promise 对象只要是通过同步的表达形式来运行异步代码。
- pending：初始状态，既不成功，也不失败；
- fulfilled：操作成功结束；
- rejected：操作失败。
下面是三种状态间的状态切换图：
