Promise

layout: post
title:  Promise
tags: javascript Promise 
categories:Ajax Promise 

1.Promise 的基本概念 ES6 将其写进了语言标准里统一了用法，是一个构造函数，用来生成 Promise 实例参数为一个执行器函数 (执行器函数是立即执行的), 该函数有两个函数作为参数，第一个参数是成功时的回调，第二个参数是失败时的回调函数的方法有 resolve (可以处理成功和失败)、reject (只处理失败)、all 等方法then、catch、finally 方法为 Promise 实例上的方法

1. 模拟一个promise的get请求 ``` let count = 0 function customGet(url){ count += 1 return new Promise((resolve, reject)=>{ const xmlHttp = new XMLHttpRequest(); xmlHttp.open(“GET”,url, true); xmlHttp.onload = ()=>{ console.log(xmlHttp, ‘xmlHttp—onload’); if (xmlHttp.readyState === 4 && xmlHttp.status === 200) { console.log(‘customGet请求成功了’); // 返回非Promise，结果为成功状态 resolve({data:第${count}次请求获取数据成功})

       // 返回Promise，结果由Promise决定
       // resolve(Promise.reject('resolve中返回reject'))
     } else {
       reject('customGet请求错误了')
     }
   }
   
   // Promise状态改变就不会再变
   // onreadystatechange方法会被执行四次
   // 当地次进来的时候，readyState不等于4，执行else逻辑，执行reject，状态变为Rejected，所以即使再执行if，状态之后不会再改变
   // xmlHttp.onreadystatechange = function(){
   //   console.log(xmlHttp,'xmlHttp---onreadystatechange')
   //   if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
   //     console.log('customGet请求成功了');
   //     resolve({data:`第${count}次请求获取数据成功`})
   //   } else {
   //     reject('customGet请求错误了')
   //   }
   // }
   xmlHttp.send();   })  }
   

// 使用Promise，并且进行链式调用 customGet(‘https://v0.yiketianqi.com/api/cityall?appid=&appsecret=’).then((res)=>{ console.log(res.data); return ‘第一次请求处理后的数据’ }).then((data)=>{ console.log(data) // console.log(data.toFixed()); return customGet(‘https://v0.yiketianqi.com/api/cityall?appid=&appsecret=’) }).then((res)=>{ console.log(res.data); }).catch((err)=>{ // 以类似’冒泡’的性质再外层捕获所有的错误 console.error(err, ‘这是catch里的错误信息’); })

3. 手写实现简单的 Promise通过上面的回顾，我们已经了解了 Promise 的关键属性和特点，下面我们一起来实现一个简单的 Promise 吧  // 1、封装一个Promise构造函数，有一个函数参数
  function Promise(executor){
    // 7、添加对象属性PromiseState PromiseResult
    this.PromiseState = 'pending'
    this.PromiseResult = null

    // 14、创建一个保存成功失败回调函数的属性
    this.callback = null

    // 8、this指向问题
    const that = this

    // 4、executor有两个函数参数（resolve，reject）
    function resolve(data){
      // 10、Promise状态只能修改一次（同时记得处理reject中的状态）
      if(that.PromiseState !== 'pending') return

      // console.log(this, 'this');
      // 5、修改对象的状态PromiseState
      that.PromiseState = 'Fulfilled'

      // 6、修改对象的结果PromiseResult
      that.PromiseResult = data

      // 15、异步执行then里的回调函数
      if(that.callback?.onResolve){
        that.callback.onResolve(that.PromiseResult)
      }
    }
    function reject(data){
      console.log(that.PromiseState, 'that.PromiseState');
      if(that.PromiseState !== 'pending') return

      // 9、处理失败函数状态
      that.PromiseState = 'Rejected'
      that.PromiseResult = data
      console.log(that.PromiseResult, 'that.PromiseResult');
      console.log(that.PromiseState, 'that.PromiseState');

      // 16、异步执行then里的回调函数
      if(that.callback?.onReject){
        that.callback.onReject(that.PromiseResult)
      }
    }
    // 3、执行器函数是同步调用的，并且有两个函数参数
    executor(resolve,reject)
  }
  // 2、函数的实例上有方法then
  Promise.prototype.then = function(onResolve,onReject){
    // 20、处理onReject没有的情况
    if(typeof onReject !== 'function'){
      onReject = reason => {
        throw reason
      }
    }
    // 21、处理onResolve没有的情况
    if(typeof onResolve !== 'function'){
      onResolve = value => value
    }
    // 17、每一个then方法都返回一个新的Promise，并且把上一个then返回的结果传递出去
    return new Promise((nextResolve,nextReject)=>{
      // 11、处理成功或失败
      if(this.PromiseState === 'Fulfilled'){
        // 12、将结果传递给函数
        // onResolve(this.PromiseResult)

        // 18、拿到上一次执行完后返回的结果,判断是不是Promise
        const result = onResolve(this.PromiseResult)
        if(result instanceof Promise){
          result.then((v)=>{
            nextResolve(v)
          },(r)=>{
            nextReject(r)
          })
        } else {
          nextResolve(result)
        }
      }
      // 当你一步步写下来的时候有没有怀疑过为什么不用else
       if(this.PromiseState === 'Rejected'){
            // 第12步同时处理此逻辑
            // onReject(this.PromiseResult)

            // 22、处理catch异常穿透捕获错误
            try {
              const result = onReject(this.PromiseResult)
              if(result instanceof Promise){
                result.then((v)=>{
                  nextResolve(v)
                }).catch((r)=>{
                  nextReject(r)
                })
              } else {
                nextReject(result)
              }
            } catch (error) {
              nextReject(this.PromiseResult)
            }
         }
  
      // 13、异步任务时处理成功或失败,想办法等异步任务执行完成后才去执行这两个函数
      if(this.PromiseState === 'pending'){
        this.callback = {
          onResolve,
          onReject
        }
        console.log(this.callback, 'this.callback');
      }
    })
  }
  // 19、函数实例上有方法catch
  Promise.prototype.catch = function(onReject) {
    return this.then(null,onReject)
  }

  // 使用自定义封装的Promise
  const customP = new Promise((resolve,reject)=>{
    // 模拟异步执行请求
    // const xmlHttp = new XMLHttpRequest();
    // xmlHttp.open("GET",'https://v0.yiketianqi.com/api/cityall?appid=&appsecret=', true);
    // xmlHttp.onload = ()=>{
    //   if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
    //     resolve('success')
    //   } else {
    //     reject('error')
    //   }
    // }
    // xmlHttp.send();

    // 同步执行
    resolve('success')
    // reject('error')
  })

  console.log(customP, 'customP');
  customP.then((res)=>{
    console.log(res, 'resolve回调');
    return '第一次回调'
    // return new Promise((resolve,reject)=>{
    //   reject('错错错')
    // })
  },(err)=>{
    console.error(err, 'reject回调');
    return '2121'
  }).then(()=>{
    console.log('then里面输出');
  }).then().catch((err)=>{
    console.error(err, 'catch里的错误');
  })



3.// 在此函数内, 遇到await会暂停代码往下, 但不影响外面继续执行同步流程
// 等所有主线程同步代码走完, 再执行await并继续向下
console.log(1);
async function myFn() {
    console.log(2);
    const res = await 3
    console.log(res);
    console.log(4);
}
console.log(5);
myFn()
console.log(6);


4. await不能捕获失败结果, 需要使用try+catch关键字捕获
/*
    try和catch语法
    try {
        // 这里放可能在执行中报错的代码
        // 如果报错会终止代码继续执行, 直接跳转进catch里执行
    } catch (err) {
        // err接收try大括号内报错抛出的异常代码
    }
*/
let p = new Promise((resolve, reject) => {
    setTimeout(() => {
        // resolve(1)
        reject(new Error('失败'))
    }, 2000)
})
 
async function myFn() {
    try {
        const res = await p
        console.log(res);
    } catch (err) {
        console.error(err)
    }
}
myFn()




5.

1.v1.0 初始版本myPromise function myPromise(constructor){ let self=this; self.status=”pending” //定义状态改变前的初始状态 self.value=undefined;//定义状态为resolved的时候的状态 self.reason=undefined;//定义状态为rejected的时候的状态 function resolve(value){ //两个===”pending”，保证了状态的改变是不可逆的 if(self.status===”pending”){ self.value=value; self.status=”resolved”; } } function reject(reason){ //两个===”pending”，保证了状态的改变是不可逆的 if(self.status===”pending”){ self.reason=reason; self.status=”rejected”; } } //捕获构造异常 try{ constructor(resolve,reject); }catch(e){ reject(e); } } 同时，需要在myPromise的原型上定义链式调用的then方法：

myPromise.prototype.then=function(onFullfilled,onRejected){ let self=this; switch(self.status){ case “resolved”: onFullfilled(self.value); break; case “rejected”: onRejected(self.reason); break; default:
} } 上述就是一个初始版本的myPromise，在myPromise里发生状态改变，然后在相应的then方法里面根据不同的状态可以执行不同的操作。

var p=new myPromise(function(resolve,reject){resolve(1)}); p.then(function(x){console.log(x)}) //输出1 但是这里myPromise无法处理异步的resolve.比如：

var p=new myPromise(function(resolve,reject){setTimeout(function(){resolve(1)},1000)});

p.then(function(x){console.log(x)}) //无输出 ```

6.v2.0基于观察模式实现 为了处理异步resolve，我们修改myPromise的定义，用2个数组onFullfilledArray和onRejectedArray来保存异步的方法。在状态发生改变时，一次遍历执行数组中的方法。

function myPromise(constructor){ let self=this; self.status=”pending” //定义状态改变前的初始状态 self.value=undefined;//定义状态为resolved的时候的状态 self.reason=undefined;//定义状态为rejected的时候的状态 self.onFullfilledArray=[]; self.onRejectedArray=[]; function resolve(value){ if(self.status===”pending”){ self.value=value; self.status=”resolved”; self.onFullfilledArray.forEach(function(f){ f(self.value); //如果状态从pending变为resolved， //那么就遍历执行里面的异步方法 });

   }
}
function reject(reason){
   if(self.status==="pending"){
      self.reason=reason;
      self.status="rejected";
      self.onRejectedArray.forEach(function(f){
          f(self.reason);
         //如果状态从pending变为rejected， 
         //那么就遍历执行里面的异步方法
      })
   }
}
//捕获构造异常
try{
   constructor(resolve,reject);
}catch(e){
   reject(e);
} } 对于then方法，状态为pending时，往数组里面添加方法：

myPromise.prototype.then=function(onFullfilled,onRejected){ let self=this; switch(self.status){ case “pending”: self.onFullfilledArray.push(function(){ onFullfilled(self.value) }); self.onRejectedArray.push(function(){ onRejected(self.reason) }); case “resolved”: onFullfilled(self.value); break; case “rejected”: onRejected(self.reason); break; default:
} } 这样，通过两个数组，在状态发生改变之后再开始执行，这样可以处理异步resolve无法调用的问题。这个版本的myPromise就能处理所有的异步，那么这样做就完整了吗？

没有，我们做Promise/A+规范的最大的特点就是链式调用，也就是说then方法返回的应该是一个promise。

3.v3.0then方法实现链式调用 要通过then方法实现链式调用，那么也就是说then方法每次调用需要返回一个primise,同时在返回promise的构造体里面，增加错误处理部分，我们来改造then方法

myPromise.prototype.then=function(onFullfilled,onRejected){ let self=this; let promise2; switch(self.status){ case “pending”: promise2=new myPromise(function(resolve,reject){ self.onFullfilledArray.push(function(){ try{ let temple=onFullfilled(self.value); resolve(temple) }catch(e){ reject(e) //error catch } }); self.onRejectedArray.push(function(){ try{ let temple=onRejected(self.reason); reject(temple) }catch(e){ reject(e)// error catch } }); }) case “resolved”: promise2=new myPromise(function(resolve,reject){ try{ let temple=onFullfilled(self.value); //将上次一then里面的方法传递进下一个Promise的状态 resolve(temple); }catch(e){ reject(e);//error catch } }) break; case “rejected”: promise2=new myPromise(function(resolve,reject){ try{ let temple=onRejected(self.reason); //将then里面的方法传递到下一个Promise的状态里 resolve(temple);
}catch(e){ reject(e); } }) break; default:
} return promise2; } 这样通过then方法返回一个promise就可以实现链式的调用：

p.then(function(x){console.log(x)}).then(function(){console.log(“链式调用1”)}).then(function(){console.log(“链式调用2”)}) //输出 1 链式调用1 链式调用2 这样我们虽然实现了then函数的链式调用，但是还有一个问题，就是在Promise/A+规范中then函数里面的onFullfilled方法和onRejected方法的返回值可以是对象，函数，甚至是另一个promise。

4.v4.0 then函数中的onFullfilled和onRejected方法的返回值问题 特别的为了解决onFullfilled和onRejected方法的返回值可能是一个promise的问题。

（1）首先来看promise中对于onFullfilled函数的返回值的要求

I）如果onFullfilled函数返回的是该promise本身，那么会抛出类型错误

II）如果onFullfilled函数返回的是一个不同的promise，那么执行该promise的then函数，在then函数里将这个promise的状态转移给新的promise III）如果返回的是一个嵌套类型的promsie，那么需要递归。

IV)如果返回的是非promsie的对象或者函数，那么会选择直接将该对象或者函数，给新的promise。

根据上述返回值的要求，我们要重新的定义resolve函数，这里Promise/A+规范里面称为：resolvePromise函数，该函数接受当前的promise、onFullfilled函数或者onRejected函数的返回值、resolve和reject作为参数。

下面我们来看resolvePromise函数的定义：

function resolvePromise(promise,x,resolve,reject){ if(promise===x){ throw new TypeError(“type error”) } let isUsed; if(x!==null&&(typeof x===”object”||typeof x===”function”)){ try{ let then=x.then; if(typeof then===”function”){ //是一个promise的情况 then.call(x,function(y){ if(isUsed)return; isUsed=true; resolvePromise(promise,y,resolve,reject); },function(e){ if(isUsed)return; isUsed=true; reject(e); }) }else{ //仅仅是一个函数或者是对象 resolve(x) } }catch(e){ if(isUsed)return; isUsed=true; reject(e); } }else{ //返回的基本类型，直接resolve resolve(x) } } 改变了resolvePromise函数之后，我们在then方法里面的调用也变成了resolvePromise而不是promise。

myPromise.prototype.then=function(onFullfilled,onRejected){ let self=this; let promise2; switch(self.status){ case “pending”: promise2=new myPromise(function(resolve,reject){ self.onFullfilledArray.push(function(){ setTimeout(function(){ try{ let temple=onFullfilled(self.value); resolvePromise(temple) }catch(e){ reject(e) //error catch } }) }); self.onRejectedArray.push(function(){ setTimeout(function(){ try{ let temple=onRejected(self.reason); resolvePromise(temple) }catch(e){ reject(e)// error catch } }) }); }) case “resolved”: promise2=new myPromise(function(resolve,reject){ setTimeout(function(){ try{ let temple=onFullfilled(self.value); //将上次一then里面的方法传递进下一个Promise状态 resolvePromise(temple); }catch(e){ reject(e);//error catch } }) }) break; case “rejected”: promise2=new myPromise(function(resolve,reject){ setTimeout(function(){ try{ let temple=onRejected(self.reason); //将then里面的方法传递到下一个Promise的状态里 resolvePromise(temple);
}catch(e){ reject(e); } }) }) break; default:
} return promise2; } 这样就能处理onFullfilled各种返回值的情况。

var p=new Promise(function(resolve,reject){resolve(“初始化promise”)}) p.then(function(){return new Promise(function(resolve,reject){resolve(“then里面的promise返回值”)})}).then(function(x){console.log(x)})

//输出 then里面promise的返回值 到这里可能有点乱，我们再理一理，首先返回值有两个：

then函数的返回值——>返回一个新promise，从而实现链式调用

then函数中的onFullfilled和onRejected方法——>返回基本值或者新的promise

这两者其实是有关联的，onFullfilled方法的返回值可以决定then函数的返回值。

五、最后补充Typescript实现的Promise/A+规范（可以忽略此节） interface IConstructor{ (resolve:IResolve,reject:IReject):void } interface IResolve { (x:any):void } interface IReject { (x:any):void } function myPromise(constructor:IConstructor):void{ let self:object=this; self.status=”pending”; self.value=undefined;//if pending->resolved self.reason=undefined;//if pending->rejected self.onFullfilledArray=[];//to deal with async(resolved) self.onRejectedArray=[];//to deal with async(rejeced) let resolve:IResolve; resolve=function(value:any):void{ //pending->resolved if(self.status===”pending”){ self.status=”resolved”; self.value=value; self.onFullfilledArray.forEach(function(f){ f(self.value); }) } } let reject:IReject; reject=function(reason:any):void{ if(self.status===”pending”){ self.status=”rejected”; self.reason=reason; self.onRejectedArray.forEach(function(f){ f(self.reason); }) } } //According to the definition that the function “constructor” accept two parameters //error catch try { constructor(resolve,reject); } catch (e) { reject(e); } }