ES6 Promise.then的源码（转载）

最新推荐文章于 2023-08-02 07:47:10 发布
最新推荐文章于 2023-08-02 07:47:10 发布
阅读量447 收藏 1
点赞数
分类专栏： JavaScript 文章标签： JavaScript Promise Promise.prototype.then 源码
原文链接：https://blog.csdn.net/weixin_41436338/article/details/79806033
版权

写源码可以了解一个函数的本质，通过对源码的理解可以让你对知识有更多的了解，欢迎大家留言交流学习。

 

 

function myPromise(fn){

            if(typeof(fn) !== 'function'){

                throw Error (`Promise resolver ${fn} is not a function`)

            }

            let _this=this;

            this.status="pending";

            this.data=null;

            this.resolvedArr=[];

            this.rejectedArr=[];

 

            function resolved(data){

                setTimeout(() => {

                    if(_this.status=='pending'){

                        _this.status = 'resolved';

                        _this.data = data;

                        _this.resolvedArr.forEach(function(fn){

                            return  fn();

                        })

                    }

                }, 0);

            }

            function rejected(err){

                setTimeout(() => {

                if (_this.status=='pending') {

                    _this.status = "rejected";

                    _this.data =err;   

                }

            }, 0);

            }

            fn(resolved,rejected);

        

        }

        myPromise.prototype.then=function(onResolved,onRejected){

            let _this = this;

            if(_this.status=='resolved'){

                return new myPromise(function(resolved,rejected){

                    let res= onResolved(_this.data)

                    if( res instanceof myPromise){  //判断res 是不是 myPromise的实例

                        res.then(resolved,rejected)

                    }else{

                        resolved(res);

                    }

                })

            }

            if(_this.status == 'rejected'){

                return new myPromise(function(resolved,rejected){

                    let res= onResolved(_this.data)

                    if( res instanceof myPromise){  //判断res 是不是 myPromise的实例

                        res.then(resolved,rejected)

                    }else{

                        resolved(res);

                    }

                })

            }

            if(_this.status == 'pending'){

                return new myPromise(function(resolved,rejected){

                  _this.resolvedArr.push((function (onResolved){

                      return function (){

                          var res = onResolved(_this.data)

                          if(res instanceof myPromise){

                              res.then(resolved,rejected)

                          }else{

                              resolved(res)

                          }

                      }

                  })(onResolved))

                _this.rejectedArr.push((function (onRejected) {

                            return function () {

                                var res = onRejected(_this.data)

                                if(res instanceof myPromise) {

                                    res.then(resolved, rejected)

                                } else {

                                    resolved(res)   

                                }  

                            }

                        } )(onRejected))

                })

            }

        }

        var p2=new myPromise(function(resolved,rejected){

            resolved('sasasa');

        });

        p2.then(function(data){

            console.log(data)

        },function(data){

            console.log(data)

        })

 

 

用class写promise源码

用class写promise源码

用class写promise源码

 

        class myPromise{

            constructor(fn){

                if(typeof(fn) !== 'function'){

                throw Error (`Promise resolver ${fn} is not a function`)

                }

                this.status="pending";

                this.data=null;

                this.resolvedArr=[];

                this.rejectedArr=[];

                let _this=this

                function resolved(data){

                    setTimeout(() => {

                        if(_this.status=='pending'){

                            _this.status = 'resolved';

                            _this.data = data;

                            _this.resolvedArr.forEach((fn)=>fn())

                        }

                    }, 0);

                }

                function rejected(err){

                    setTimeout(() => {

                    if (_this.status=='pending') {

                        _this.status = "rejected";

                        _this.data =err;   

                    }

                }, 0);

                }

                fn(resolved,rejected)

             }

            then(onResolved,onRejected){

                        let _this = this;

                    if(_this.status=='resolved'){

                        return new myPromise((resolved,rejected)=>{

                            let res= onResolved(_this.data)

                            if( res instanceof myPromise){  //判断res 是不是 myPromise的实例

                                res.then(resolved,rejected)

                            }else{

                                resolved(res);

                            }

                        })

                    }

                    if(_this.status == 'rejected'){

                        return new myPromise((resolved,rejected)=>{

                            let res= onResolved(_this.data)

                            if( res instanceof myPromise){  //判断res 是不是 myPromise的实例

                                res.then(resolved,rejected)

                            }else{

                                resolved(res);

                            }

                        })

                    }

                    if(_this.status == 'pending'){

                        return new myPromise((resolved,rejected)=>{

                        _this.resolvedArr.push(((onResolved)=>

                                 ()=>{

                                let res = onResolved(_this.data)

                                if(res instanceof myPromise){

                                    res.then(resolved,rejected)

                                }else{

                                    resolved(res)

                                }

                            

                        })(onResolved))

                        _this.rejectedArr.push(((onRejected)=> 

                                     ()=> {

                                        let res = onRejected(_this.data)

                                        if(res instanceof myPromise) {

                                            res.then(resolved, rejected)

                                        } else {

                                            resolved(res)   

                                        }  

                                    }

                                 )(onRejected))

                        })

                    }

            }   

        }


 

kerryabc
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
promise:一个简单的es6 promise的polyfill
04-30
在"promise-master"这个压缩包中，可能包含了Promise的源码实现、测试用例、以及构建和部署的相关脚本。开发者可以研究这些代码来理解Promise的工作原理，或者在不支持Promise的环境中使用这个polyfill来实现Promise...
微信小程序demo：引入es6 promise：网络请求封装
03-15
在给定的压缩包文件`es6-promise-master`中，可能包含了关于Promise的实现源码，这可以帮助我们更好地理解Promise的工作原理，以及如何在没有原生支持Promise的环境中引入和使用Promise。通过学习这个库，开发者可以...
ES6 Promise.then的源码（跟着大大写的）
weixin_41436338的博客
04-03 1919
写源码可以了解一个函数的本质，通过对源码的理解可以让你对知识有更多的了解，欢迎大家留言交流学习。 function myPromise(fn){ if(typeof(fn) !== 'function'){ throw Error (`Promise resolver ${fn} is not a function`) ...
V8引擎Promise源码全面解读（深度好文）
最新发布
前端下午茶
08-02 1253
作者：月夕原文：https://juejin.cn/post/7055202073511460895写在前面的话阅读本文你将收获什么？了解 V8 Promise 源码全过程，世界上不再有能困住你的 Promise 题目，我就是这么肯定这篇文章的干货仅仅了解或者实现了 Promise/A+ 规范，这与 JavaScript 的 Promise 中间还有很大的差距如果你在面试时将 Promise 回答...
Promise实现原理（附源码）
nicexibeidage的博客
12-19 413
写的是真的好，详细，特此转载保存一下。 本篇文章主要在于探究Promise的实现原理，带领大家一步一步实现一个Promise, 不对其用法做说明，如果读者还对Promise的用法不了解，可以查看阮一峰老师的ES6 Promise教程。 接下来，带你一步一步实现一个Promise 1.Promise基本结构 new Promise((resolve, reject) =...
promise源码详解
qq_33141245的博客
06-22 3155
promise源码详解
es6 手写Promise实现源码
weixin_43294560的博客
03-27 445
实现思路: 因为Promise是es6出来的,所以整体设计都使用es5的类和普通function 基本大纲: (1)当new Promise时,在Promise类内部执行传入的方法体,形参resovle和reject都是类内部定义的方法,用来改变Promise内部的状态和值 (2)当使用.then接收时 会使用.then传入的方法参数,调用该方法,传入Promise的值,若执行器同步执行,直接调用,若执行器异步执行,则保存方法,带到执行器执行时再一起调用 (3)当使用.then返
promise.js
07-29
源码实现需要熟悉Promise的使用，实现了Promise的then，catch，resolve，reject，all，race六种方法，测试的html自己编写一下就好了，记得引入promise文件 否则使用的就是js自带的promise
阮一峰es6教程文档源码
03-16
这份源码正是他的教程文档的原始代码，可以帮助读者深入理解ES6的实现原理和应用技巧。** 1. **箭头函数**：箭头函数是ES6中的一种新语法，它使得函数的定义更加简洁。例如，`const add = (x, y) => x + y;`。箭头...
小程序使用es6封装ajax源码案例
06-25
在这个“小程序使用es6封装ajax源码案例”中，我们将深入探讨如何利用ES6的Promise和模块化特性来优雅地实现Ajax请求，并将其应用到微信小程序的开发中。 首先，让我们理解一下核心概念： 1. **ES6**：这是...
小程序用es6 promise
04-02
小程序引用es6 promise,亲测，请大家下载，放心使用，谢谢！
ES6-Promise及源码实现
爱代码的小海的博客
09-13 357
开头说明 promise实例化对象的属性值 [promiseState] promise实例化对象的属性值 [promiseResult] promise的API Promise的构造函数 [Promise(executor){}] Promise.prototype.then方法 [(onResolved, onRejected){}] Promise.prototype.catch方法 [(onRejected){}] Promise.resolve方法 属于Promise函数对象 [(value..
es6 promise 源码解析
qq_42389674的博客
07-17 350
promise 源码解析
一篇文章解决ES6Promise（加源码解析）
m0_57506941的博客
10-24 166
什么是promise？ promise是JS中进行异步编程的新解决方案，promise是一个构造函数，使用promise对象可以用来封装一个异步操作并可以获取其成功/失败大的结果值 Promise状态的改变 pending变为resolved（成功） pending变为rejected（失败） 注意：只有这两种，且一个promise对象只能改变一次，无论变为成功还是失败，都会有一个结果数据，成功结果数据一般称为value，失败为reason。 promise的基本使用 ..
ES6 Promise.then的源码（跟着大大写的）
kerryabc的博客
01-16 175
写源码可以了解一个函数的本质，通过对源码的理解可以让你对知识有更多的了解，欢迎大家留言交流学习。 functionmyPromise(fn){ if(typeof(fn)!=='function'){ throwError(`Promiseresolver${fn}isnotafunction`) ...
ES6---promise源码
赵佳敏的博客
01-14 230
function Promise(executor) { let self = this; // 保存成功的值和失败的原因 self.value = undefined; self.reason = undefined; // 专门存成功的回调 self.onResolvedCallbacks = []; // 专门存失败的回调 self.onRejectedCallbac...
ES6——Promise源码（原生javascript全部实现）
cnailili的博客
02-07 1250
ES6——Promise源码（原生javascript全部实现）： function MyPromise (func) { var self = this; self.status = 'pending'; //进来时就先定义一个'pending'状态；等待调用时改变状态； self.resolveValue = ...
Promise的常见方法和源码
1900's 88 keys的博客
03-14 810
目录Promise的常见方法和源码Promise常见方法Promise.reject(reason)Promise.resolve(value)Promise.race(iterable)Promise.all(iterable)Promise.allSettled()Promise.any()手写Promise源码 Promise的常见方法和源码 Promise常见方法 Promise.reject(reason) Promise.reject()方法返回一个带有拒绝原因的Promise对象。 Pro
Promise源码阅读之ES6 Extensions API
玉案轩窗的博客
11-13 308
前言 本次阅读的Promise是基于Promise A+规范的，对于ES6 Promises规范中有些API需要提供另外的支持，即ex6-extensions.js文件中的逻辑处理。 具体分析 Promise.resolve 该方法返回一个fulfilled状态的Promise对象 if (value instanceof Promise) return value; // NULL 即v...
es6promise.on的用法
04-01
console.error(`Unhandled rejection (promise: ${event.promise}, reason: ${event.reason}).`); }); Promise.reject(new Error('Oops!')); // Output: Unhandled rejection (promise: [object Promise], reason:...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值