【前端】一文彻底学会Promise

作者：D827

来源：恒生LIGHT云社区

没有一个功能是看了源码后，还不会用的。所以看完本篇文章，希望能帮助你彻底掌握Promise。

Promise的介绍

Promise对象是ES6提供的实现异步的一个解决方案，它使得异步方法可以像同步方法那样返回值。

promise是一个构造函数，包裹（封装）一个异步函数(ajax;定时器；数据库读取；fs文件读取)，当然它也可以包裹一个非异步函数。入参为两个函数：resolve、reject。成功调用resolve，并传递参数，失败调用reject，并传递参数。使用.then来作为回调结果的处理，then接受两个函数参数，第一个参数接受正确的返回结果，第二个函数接收错误的返回结果。

Promise三种状态：pending、fullfilled/resolved、rejected

Promise初始状态为pending，通过resolve方法将状态修改为fullfilled/resolved;通过reject将状态修改为rejected

promise的优点：它能够实现链式调用，解决了回调实现异步导致的回调地狱问题。

promise的缺点：

1. 无法监测进行状态、新建立即执行且无法取消；
2. 如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部；
3. 有时会造成多个 then 的链式调用，可能会造成代码的语义不够明确。

Promise的基本使用

function sleep(data){
   
    return new Promise((resolve,reject)=>{
   
    // new Promise 包裹的可以是一个异步的代码，也可以是一个同步的代码
    // 代码执行成功
        setTimeOut(()=>{
   
           	let result = null
            if(1){
   
              resolve(result)  
            }else{
   
               reject(result) 
            } 
        },1000)
})
}
sleep(1000).then(v=>{
   
    // 正确返回处理
},e=>{
   
   // 错误返回处理
}).then(v=>{
   
  
}).then(v=>{
   
  
})
……
.catch(e=>{
   
    // 错误处理
})

自定义Promise需要注意的问题，及解答

1. promise如何修改状态

   通过调用resolve、reject修改状态

2. 多次调用resolve、reject可以修改状态吗

   不可以，当从pending修改为resolved或者rejected后无法再次修改为其他状态

3. promise是先修改状态还是显示执行then，以及什么时候得到数据

   两种情况都可能出现，当promise包裹的内容为异步时先指定then再修改状态，反之先修改状态再执行then；

   数据是在执行完回调后获取。

4. promise.then返回一个promise，这个返回的类型结果由谁决定

   返回的为promise，由返回的promise决定

   返回为非promise，则返回为resolved

5. promise如何串联多个操作任务

   因为promise.then返回的是一个新的Promise对象，所以还可以调用then，实现链式调用

6. promise异常穿透

   意思是不论有多少个then，中间任意一个then出现报错都会被catch捕获

7. 如何终止promise链

   then中任意一个出现异常；

   在任意then中将promise的状态改为pending。

Promise的自定义

 //声明构造函数
 function Promise(executor){
   
     //添加属性
     this.PromiseState = 'pending';
     this.PromiseResult = null;
     //声明属性 回调存在多个情况
     this.callbac