前端开发必备技能——Async/Await 和 Promise

本文开始先通过介绍 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 对象只要是通过同步的表达形式来运行异步代码。

1. pending：初始状态，既不成功，也不失败；
2. fulfilled：操作成功结束；
3. rejected：操作失败。

下面是三种状态间的状态切换图：