很多朋友都对“在JS中promise的实现过程是怎样，原理怎么理解”的内容比较感兴趣，对此小编整理了相关的知识分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获，那么感兴趣的朋友就继续往下看吧！

目录

• step1 搭建框架
• step2 填充搭建好了的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　　　　　　　　　　　　　　　　　　　　　　　　

是不是很简单呀，快叫上身边的小伙伴一起来试一试吧！

总结

到此这篇关于“在JS中promise的实现过程是怎样，原理怎么理解”的文章就介绍到这了,更多相关内容请搜索群英网络以前的文章或继续浏览下面的相关文章，希望大家以后多多支持群英网络！

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

猜你喜欢

• JS和Typescript对比是怎样，特点用途是什么

  这篇文章主要介绍了 JavaScript 与 TypeScript之间的联系,JavaScript,也称为 JS,是一种符合 ECMAScript 规范的编程语言。这是一个高级别的、通常是即时编译的、多范式的。TypeScript 是一种强类型、面向对象的编译语言，更多消息内容,需要的朋友可以参考一下下面文章内容

• js点击切换验证码功能怎样写？

  我们日常上网的时，登录注册账号往往都需要输入验证码，但是如果一些验证码干扰项太多，那么用户看不清，就需要有切换验证码及校验的功能，那么这要怎样做呢？下面就给大家分享js实现简单点击切换验证码的代码，需要的朋友可以参考学习。

• 怎样用js实现简易的五星好评功能？

  现在很多商品都有售后评价，那么五星好评的功能是怎样实现的呢？这篇文章就给大家分享一下用用js实现简易的五星好评功能，实现效果及代码如下，感兴趣的朋友就继续往下看吧。

• React路由传参方法有哪些？怎样实现？

  React路由传参方法有哪些？我们知道React中传参方式有很多，通过路由传参的方式也是必不可少的一种。因此，这篇文章就给大家分享一下React路由传参方法及实现，感兴趣的朋友就继续往下看吧。

• Vue实时获取天气的功能怎样实现？

  今天给大家分享的是用Vue怎样实现实时获取天气的功能，而在在 vue 中，我们可以利用webSocket来做一个简单的天气实时更新，下文是实现效果及示例，感兴趣的朋友就继续往下看吧。