Javascript 之异步请求

)异步编程模块在前端中，经历了 XHR 到 jquery 封装的 Ajax 都在试图解决异步编程中的问题。传统的 ajax 当异步请求的数据存在依赖关系的时候，会产生多重回调问题，俗称“回调地狱” callback hell。

ES6 提供了一个 Promise 对象来解决“回调地狱”问题，但 Promise 也不是完美的，近年来，Javascript 提供了 Async/Await 解决方案，使异步代码看起来像同步代码方法。

1.什么是 Promise

Promise 是一个对象，通过它可以获取异步操作的结果。promise 有三中状态：pending（等待状态）、fulfilled（成功状态）、rejected（失败状态），状态一旦改变，就不会再变。

Promise 本身是一个构造函数

new Promise((resolve, reject) => {

    //里面做一些异步操作

})

new Promise()

new Promise() : 接收一个闭包函数，闭包函数有两个参数 ，这两个参数也是函数：resolve 函数用于将 promise 状态转换为“成功态”，reject 函数用于把 promise 状态转换为“失败态”。

new Promise 实例对象有一些原型方法：then、catch

2. then 方法：

then() 方法接收两个闭包函数，一个处理“成功态”结果，另一个处理“失败态”结果。then() 方法返回的“结果”会是下一个 .then() 方法链的“输入”，非常类似于“管道模式”。

new Promise 链式操作

3.Promise 构造函数本身一些方法：

resolve()、reject() 可以快速造出一个 Promise 对象：

resolve():

直接转换为“ 成功态” promise 对象

reject():

直接转换为“ 失败态” promise 对象

all():

all() 提供并行执行的能力

race():

race() 优先返回处理结果

============================

Async-await 异步解决方案：

async/await 是基于 Promise 实现的，不能用于普通的回调函数。

async/await 使得异步代码看起来像是同步的（“异步代码同步化”）

1.  Async/await 使用原则

（1）凡是在函数前面声明了 async 标记的函数，在执行后都会自动返回一个 Promise 对象

async 标记的函数，函数执行结果为 promise 对象

（2）await 必须在 async 函数里面使用，不能单独使用。

（3）await 后面必须返回一个 promise 对象，否则不会出现“等待”，直接执行接下来语句。

async/await 使用案例 console 结果

2.使用 async/await 好处：

代码简洁，不需要再写 .then, 不需要处理 promise(resolve,reject),还避免了嵌套代码。