Promise和async/await

一、为什么有Async/Await？

我们都知道已经有了Promise的解决方案了，为什么还要ES7提出新的Async/Await标准呢？

答案其实也显而易见：Promise虽然跳出了异步嵌套的怪圈，用链式表达更加清晰，但是我们也发现如果有大量的异步请求的时候，流程复杂的情况下，会发现充满了屏幕的then，看起来非常吃力，而ES7的Async/Await的出现就是为了解决这种复杂的情况

二、Promise的基本概念

Promise本质上其实就是一个构造函数，是用来解决异步编程的一种方案，她呢最早是由社区提出来解决异步回调地狱的，后来W3C觉得不错，也就在ES6中引入了它

我们通过new关键字创建Promise对象，它的参数是一个回调方法，这个回调方法里有两个参数，分别是成功回调，和失败回调，我们就可以通过这两个个回调来去定义成功的数据，和失败的数据，那么怎么接收他们返回的数据呢？

1. 通过then()方法来接收成功之后的数据
2. 通过 catch()方法来接收失败之后的数据

基本的使用实例：

const setDelay = (millisecond) => {
  return new Promise((resolve, reject)=>{
      if (typeof millisecond != 'number') reject(new Error('参数必须是number类型'));
      setTimeout(()=> {
        resolve(`我延迟了${millisecond}毫秒后输出的`)
      }, millisecond)
  })
}
setDelay(2000).then(res=>{	
    // 成功返回的数据字段
    console.log(res)
}).catch(error=>{
    // 失败返回的数据
    console.log(error)
})

三、Async/await介绍

3.1 基于Promise的Async/await

什么是async/await呢？可以总结为一句话：async/await是一对好基友，缺一不可，他们的出生是为Promise服务的。可以说async/await是Promise的爸爸，进化版。为什么这么说呢？且听我细细道来。

为什么要有async/await存在呢？

前文已经说过了，为了解决大量复杂不易读的Promise异步的问题，才出现的改良版。

这两个基友必须同时出现，缺一不可，那么先说一下Async：

async function process() {
}

上面可以看出，async必须声明的是一个function，不要去声明别的，要是那样await就不理你了（报错）。

这样声明也是错的！

const async demo = function () {} // 错误的示范

3.2 await的意思

• await的意思就是等待。它后面可以跟一个表达式。如果是值(如字符串、数字、普通对象等等)的话，返回值就是本身的值。
• 不过最常用的是后面跟一个promise对象。await会等待这个promise的状态由pending转为fulfilled或者rejected。在此期间它会阻塞，延迟执行await语句后面的语句。
• 如果promise对象的结果是resolve，它会将resolve的值，作为await表达式的运算结果。

请记住await是在等待一个Promise的异步返回

我们常说什么async/await的出现淘汰了Promise，可以说是大错特错，恰恰相反，正因为有了Promise，才有了改良版的async/await，从上面分析就可以看出，两者是相辅相成的，缺一不可。

想学好async/await必须先精通Promise