Promise详解

1、什么是Promise

Promise是ES6异步编程的一种解决方案(目前最先进的解决方案是async和await的搭配，但是它们是基于promise的)，从语法上讲，Promise是一个对象或者说是构造函数，用来封装异步操作并可以获取其成功或失败的结果。

2、为什么要使用promise

最主要的一个场景就是ajax和axios请求。由于网速的不同，可能你得到返回值的时间也是不同的，但是我们下一步要执行的代码依赖于上一次请求返回值，这个时候我们就需要等待，结果出来了之后才知道怎么样继续执行下去。

3、Promise的优点

1.可以避免多层异步调用嵌套问题(回调地狱)
2.Promise 对象提供了简洁的API，使得控制异步操作更加容易

4、Promise的状态

Promise只有三种状态，分别为：pending(等待)、fulfilled(成功状态)、rejected(失败状态)

这三种状态不受外界影响，而且状态只能从pending改变为resolved或者rejected，并且不可逆

5、Promise的用法

Promise的主要用法为使用promise的实例方法：

①then()方法得到异步任务的正确结果

②catch()方法获取异常信息

// 初始化Promise **使用** 
const Promise = new Promise((resolve,reject) =>{
    if(Math.random() * 0.5){
        resolve('SUCCESS')  //成功  
    }else{
       reject('Failure')    //失败
    }
})

Promise.then((val) =>{
    console.log(val)
})
.catch((err) =>{
    console.log(err)
})

6、Promise的特点

（1）、在Promise对象的构造函数中，将一个函数作为第一个参数。

（2）、Promise对象中的then方法，可以接收构造函数中处理的状态变化，并分别对应执行。then方法有2个函数参数，第一个函数接收resolved(promise状态为成功)的执行，第二个函数接收reject(promise状态为失败)的执行。

promise.then(onFulfilled =>{
//成功之后的回调
},onRejected =>{
//失败之后的回调
})

(3)、三种状态：pending（初始状态），fulfilled（操作成功），rejected（操作失败）状态变化只有pending---fulfilled或者pending---rejected；一旦发生，状态就不再会发生改变

7、原理（源码实现）

//定义三种状态
const PENDING_STATE = 'pending'
const FUFILLED_STATE = 'fulfilled'
const REJECTED_STATE = 'rejected'

//Promise 构造器
function MiaoPromise(fun){
 // 发布订阅模式
 this.onFulfilledCallbacks = []; //成功后执行的回调
 this.onRejectedCallbacks = []; //失败后执行的回调
 
 //定义初始化的Promise状态
 this.state = PENDING_STATE;
 this.value = void 0;//初始值
 
const resolve = function(val){
    //具体实现成功的方法
    //将状态设置为成功
    if(Promise.state == PENDING_STATE){
        //执行完成
         Promise. state =  FUFILLED_STATE;
         Promise.value = xxx;
         //发布
         this.onFulfilledCallbacks.forEach((callback) =>{
             callback(xxx)         
         })
    }
}

const reject = function(err){
    //具体实现失败的方法
    //将状态设置为失败
    if(Promise.state == PENDING_STATE){
        //执行完成
         Promise. state =  REJECTED_STATE;
         Promise.value = reason;
         //发布
         this.onRejectedCallbacks.forEach((callback) =>{
             callback(reason)         
         })
    }
}
fun(resolve,reject);
}

// 为MiaoPromise 添加 then原型方法(订阅)
MiaoPromise.prototype.then = function(onFulfilled,onRejected) {
  onFulfilled &&  this.onFulfilledCallbacks.push(onFulfilled);
  onRejected &&  this.onRejectedCallbacks.push(onRejected);
  
  //支持链式调用
  return this;
}