手撸Promise简单版--上

1、看Promise

首先浅看一下es6的promise 大概有哪些内容,即开始 new Promise实例化的时候需要两个参数(其实是两个函数 ,人家里面给你留的)然后 你里面进行 参数操作 如果成功就调用resolve把成功的参数传进去
在这里插入图片描述
然后就能在then里面接收到两个函数 ,第一个函数是操作的resolve传进来的参数,第二个是reject 失败后的参数
在这里插入图片描述
接下来我们就能简单实现这两个功能,首先里面有三种状态pending 等待态 fulfilled 完成态 rejected 失败态
开始实例化的时候,里面开始就是等待态 ,其实我们发现,原来的Promise 先调用resolve后reject就失效了
如下:在这里插入图片描述

2、做简易Promise

2.1、分析1

2.1.1、解决只能优先调用一个的问题

那简单,直接进行判断,只要当前状态是等待态我们就阔以进行状态修改和值的修改

if (this.status !== "PENDING") return  //promise只会有一种状态,由等待转成功 或者失败
      this.status = "FULFILLED"  //改变状态说明这个已经调用过了,后续就不能掉用了 
      this.value = successInfo
2.1.2、解决then

我们原来的Promise,以及上面我们看到的截图,两个参数,也是两个函数,第一个函数是成功状态,第二个是失败状态,那好办啊,因为函数执行executor,调用resolve,reject时状态就会变了啊,所以我们直接在对象里面调用时进行状态判断,由于成功和失败的值都已经保存好了,直接把值传给这将要执行的函数就行

then(onFulfilled,onRejected){
      if(this.status==="FULFILLED"){
          onFulfilled(this.value)
      }
      if(this.status=="REJECTED"){
        onRejected(this.value)
      }
  }
2.1.3、解决catch

这个其实大可偷懒 ,直接调用then里面的onReject,第一个参数不要传null,第二个参数,这样还能在then直接就进行判断了

catch(onRejected){
   this.then(null,onRejected) 
  }
2.1.3 、状态改变的操作 ,注释已写
class myPromise {
  constructor(executor) {
    if (typeof executor !== "function") {
      return console.error(“mypromise must accept a function as a parameter”) //需要一个函数形式的参数
    }
    this.status = "PENDING" //函数状态 这个是等待态,即还没执行的时候
    this.value = undefined  //此时还没有值 ,存改变状态后成功或者错误的值
    //成功的回调
    let resolve = value=> {
      if (this.status !== "PENDING") return  //promise只会有一种状态,由等待转成功 或者失败
      this.status = "FULFILLED"  //改变状态说明这个已经调用过了 
      this.value = value
    }
    let reject = reason=> {
      if (this.status !== "PENDING") return  //promise只会有一种状态,由等待转成功 或者失败
      this.status = "REJECTED"  //改变状态说明这个已经调用过了 
      this.value = reason
    }

    try {
      executor(resolve, reject) //将函数扔进去 这个才是实参,实例化的时候是形参,即随便取名,不一定非要叫resolve,reject
    } catch (error) {
      reject(err) //出现异常直接给reject
    }
  }
  then(onFulfilled,onRejected){
      if(this.status==="FULFILLED"){
          onFulfilled(this.value)
      }
      if(this.status=="REJECTED"){
        onRejected(this.value)
      }
  }
   catch(onRejected){
   this.then(null,onRejected)
  }
}
2.1.4 对照组实验

在这里插入图片描述

ok这样的话简易的Promise就差不多了,,现在写的能解决 异步调用??链式调用??回调地狱??那就接着深入

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值