如何实现一个简易promise

发布时间:2021-11-02 13:50:29 作者:小新
来源:亿速云 阅读:194

这篇文章主要介绍如何实现一个简易promise,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

step1 搭建框架

1. 首先我们需要在这里放置一个promise函数本体 后面要在里面添加resolve、reject的执行函数

  function Promise(execotor) {}

2. 原装promise中有then与catch这两个主要的方法,所以我们要给promise的原型挂载then与catch

  Promise.prototype.then = function (onResolved, onRejected) {}
  Promise.prototype.catch = function (onRejected) {}

3. 给promise挂载几个常见方法 resolve、reject、all、race等等

resolve:返回的是一个指定结果的promise对象

  Promise.resolve = function (value) { }

reject:返回失败状态的方法

  Promise.reject = function (value) { }

all:返回一个promise对象,只有当promise都返回的时候,这个状态才算成功

  Promise.all = function (value) { }

race:返回一个promise对象,它的状态是由第一个返回的对象确定的,这个race里面哪个函数先执行完,就直接返回第一个值,其他的继续执行

  Promise.race = function (value) { }

4. 全局声明mypromise

  window.Promise = Promise

5. 建立一个自执行函数 将上述内容全部包裹进去

(function (window) {

})()

step2 填充搭建好了的Promise框架

1.填充function Promise()

(1)let self = this固定一个function内部的this,这个this在后面会发挥很大作用

(2)self.status = 'pending'为Promise函数本体添加一个基础状态‘pending'

(3)self.data = undefined建立一个data源,用来存储resolve传回来的结果

(4)self.callbacks = []建立一个数组,用来将promise中的回调全部保存起来

2.填充function resolve()

(1)        if (self.status !== 'pending') {           return         }判断当前传入进程的状态是否为pending,是就继续下面的操作,不是就直接返回

promise内部有三种状态pending、resolved、rejected,这三种状态都是一种开关变量,如果该状态从pending转为其他状态后将无法改变。

(2)self.status = 'resolved'将该进程的状态改为resolved

(3)self.data = value将value存起来,待会then中的回调会需要使用该数据

(4)放上最重要的执行函数部分,如果sele.data中有待执行的callback函数,立即异步执行它

if (self.callbacks.length > 0) {
      setTimeout(() => {
        self.callbacks.forEach(callbackObj => {
          callbackObj.onResolved(value)
        })
      }, 0)
    }

3.填充function reject()

(1) 与resolve函数相同,此处简略

4.填充execotor方法

promise主体在执行时如果出错,错误信息被catch捕捉,此时catch会跳至该函数来单独执行一个reject

 try {
       execotor(resolve, reject)
     } catch (error) {
       reject(error)
     }

5.填充.then函数

首先我们要区分传入进程的状态,如果是pending状态就把回调函数存起来,如果不是pending状态就干点什么它应该做的

(1)if (self.status === 'pending')如果当前的状态是pending的话,我们就把它保存起来

self.callbacks.push({
      onResolved() { onResolved(self.data) },
      onRejected() { onRejected(self.data) }
    })

(2)else if (self.status === 'resolved')如果status的状态是resolved

我们就开开心心的给它执行一下

setTimeout(() => {
      onResolved(self.data)
    }, 0)

可是有这么一种状态:resolve没有执行,但此时状态却已经改变了,我们就不能执行resolve而改为执行rejected

   else{
     setTimeout(() => {
       onRejecyed(self.data)
     }, 0)
   }

经过了如同怎么把大象塞进冰箱一样“简略”的两步,我们就实现了一个简易的Promise                        

以上是“如何实现一个简易promise”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. 深入 Promise(一)——Promise 实现详解
  2. 如何实现Promise的方法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

promise

上一篇:C++模板编程的示例分析

下一篇:Swift如何实现缩放并填充图片功能

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》