JS promise

时间：2020-10-06 19:53:44 收藏：0 阅读：36

Promise解释

Promise 是一个对象，它代表一个异步操作的最终完成或失败。由于它的 then 方法和 catch、finally 方法会返回一个新的 Promise，所以可以允许我们链式调用，解决了传统的回调地狱问题。

3个状态：pending、fullfilled、rejected。

new Promise((resolve,reject)=>{
  resolve()
}).then(res=>{

}).catch(err=>{

})

then和catch方法

Promise 的状态一经改变就不能再修改。
.then 和 .catch 都会返回一个新的 Promise。
catch 不管被链接到哪里，都能捕获上层未捕捉过得错误。
在 Promise 中，返回一个任意的非 Promise 的值都会被包裹成 Promise 对象，例如 return 2 会被包装成 return Promise.resolve(2)。
Promsie 的 .then 或者 .catch 可以被调用多次，但如果 Promise 内部的状态一经改变，并且有了一个值，那么后续每次调用 .then 或者 .catch的时候都会直接拿到该值。
.then 或者 .catch 中 return 中一个 error 对象并不会抛出错误，所以不会被后续的 .catch 捕获。
.then 或 .catch 返回的值不能是 Promise 本身，否则会造成死循环。
.then 方法是可以接收两个参数的，第一个是处理成功的参数，第二个是处理失败的参数，再某些时候你可以认为 catch是 .then 第二个参数的简便写法。
.then 或 .catch 的期望参数是函数，传入非函数会发生值穿透。

finally方法

.finally() 方法也是返回一个 promise，他在 Promise 结束的时候，无论结果为 resolved 还是 rejected，都会执行里面的回调函数。
.finally() 方法的回调不接受任何的参数，也就是说在 .finally() 函数中是没法知道 Promise 的最终态是 resolved 还 rejected。
它最终返回的默认是一个上一次的 Promise 对象值，不过如果抛出的是一个异常，则是返回异常的 Promise 对象。

all及race方法

Promise.all() 可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被 reject 失败状态的值，例如一个页面要分了多个异步请求去加载数据，那必须要等数据全部成功返回，页面才会成功显示。
Promise.race() 的作用也是接收一组异步任务，然后执行异步任务，只保留第一个执行完成的异步操作结果，其他的方法仍在执行，不管结果如何会被抛弃。比如有几个异步请求同时去访问一个图片，最先获取的则直接返回，其他的则无用了。
Promise.all().then() 结果中的数组的顺序和 Promise.all() 接收到的数组顺序一致。
all 和 race 传入的数组中如果有会抛出异常的异步任务，那么只有最先抛出的错误会被捕获，并且是被 then 的第二个参数或者后面的 catch 捕获，但不会影响数组中其他的异步任务的执行。

promise解决了什么问题

把异步操作的回调函数嵌套问题变成了异步操作的链式调用

实现一个简易的promise

class MyPromise{
  constructor(fn){
    this.status=‘pending‘;
    this.value=‘‘
    this.reason=‘‘
    //成功的回调
    this.onResolveCBs=[]
    //失败的回调
    this.onRejectCBs=[]

    let resolve=(reason)=>{
      if(this.status==‘pending‘){
        this.status=‘fulfilled‘;
        this.reason=reason;
        this.onResolveCBs.forEach(fn=>fn())
      }
    }

    let reject=(value)=>{
      if(this.status==‘pending‘){
        this.status=‘rejected‘
        this.value=value;
        this.onRejectCBs.forEach(fn=>fn())
      }
    }
    
    try{
      fn(resolve,reject);
    }catch(e){
      reject(e)
    }
  }

  then(onResolve,onReject){
    if(this.status===‘fulfilled‘){
      onResolve()
    }
    if(this.status===‘rejected‘){
      onReject();
    }
    if(this.status===‘pending‘){
      this.onResolveCBs.push(()=>onReject(this.value));
      this.onRejectCBs.push(()=>onReject(this.reason))
    }
  }
}


new MyPromise((resolve,reject)=>{
  setTimeout(()=>{
    resolve()
  },2000)
  // reject()
}).then(res=>{
  console.log(‘成功‘)
},err=>{
  console.log(‘失败‘)
})

参考

MDN Promise