JavaScript 进阶 40 -- Promise 白话讲解Promise

ES6原生提供了 Promise 对象。

当一个异步任务的执行需要依赖另一个异步任务的结果时，我们一般会将两个异步任务嵌套起来，但是使用回调函数来解决异步问题，简单还好说，但是发生很多次之后，这就是所谓的回调地狱，代码层层嵌套，环环相扣，逻辑稍微复杂一些，程序就会变得难以维护。

Promise，一定程度上解决了JavaScript的流程操作问题。Promise的用处，实际上是在于多重异步操作相互依赖的情况下，对于逻辑流程的控制。

先直接打印出来看看，console.dir(Promise)

直观的看到 ，Promise是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。这些方法都很眼熟吧

Promise是什么？

上面打印出来的结果，可以很清晰的看出 ，Promise是原生js 的一个类。

高版本浏览器默认支持。低版本有两种解决方案：1、可以自己手写，2、使用es6的库：es6-promise

1、主要用于异步计算

2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果

3、可以在对象之间传递和操作promise，帮助我们处理队列

4、代码风格，容易理解，便于维护

5、多个异步等待合并便于解决

 promise 语法

promise 的意思就是“承诺”。表示：其他手段无法改变。

三种状态： 静待状态（初始状态） pending 、成功状态 fulfilled  、失败状态 rejected

【例1】既然是一个类，就 new一个 Promise 来看看

let p = new Promise((resolve,reject)=>{
    console.log('同步操作')
    setTimeout(() => {
        resolve('异步操作，要传递的数据');
    }, 1000);    
})

Promise 接收一个 executor执行函数 作为 参数（Promise的构造函数接收一个参数，是函数），并且传入两个参数：resolve，reject。当new的时候，这个执行函数立即执行。先执行同步代码，异步代码先放着。所以会先输出 ‘同步操作’，再去执行setTimeout()函数，而setTimeout这个函数是异步的在1秒后才会执行，并调用resolve函数。

resolve：调用该参数表示--从 静待态 转为 成功状态。reject：调用该函数时表示--从 静待态 转为 失败状态。这里可以暂时这么理解：resolve 理解为成功后要传递的数据，reject 理解为失败后要传递的数据。

        Promise对象的状态改变只有两种：从 pending 变为 fulfilled 或者从 pending 变为 rejected。成功状态不能转为失败态，失败态不能转为成功态。只要发生状态转变的情况，那么该状态就凝固了，不会再变了，会一直保持这个结果。这两种状态只能有一个，不能同时存在。谁写在前，就执行谁  

【 例2 】 这是同步操作

let p = new Promise((resolve,reject)=>{
    resolve("成功了");
    //reject('不努力');
})
p.then((value)=>{
    //成功时
    console.log('恭喜',value);//恭喜 成功了
},(rejected)=>{
    //失败时
    console.log('失败了',rejected);//失败了 不努力
})

promise.then() 是 promise 最为常用的方法，实例化过的 promise 对象可以调用 promise.then() 方法，传递 resolve 和 reject 方法作为回调。

【 例 3 】