一个超详细的简版Promise实现

最新推荐文章于 2024-05-26 09:45:58 发布
最新推荐文章于 2024-05-26 09:45:58 发布
阅读量209 收藏
点赞数
文章标签： c#
原文链接：https://juejin.im/post/5d2470a46fb9a07eea32986b
版权

这是一个简版非规范的Promise实现，其中前置知识点比较重要，理解了前置知识点的内容，也就了解了Promise最基本的原理。

前置知识

这小节的核心是：把函数名当变量用。

以下三点理解之后，就能够实现简单的Promise了。

  1. 类型为Function的变量，可以像函数一样调用。

举个栗子

let myFn = function () {};
复制代码

你可以直接调用

myFn(); 
复制代码

和下面的代码效果是一样的

function myFn() {
    // code here...
}

myFn();
复制代码
  1. 函数数组，即函数里的每一个元素都是函数，可以用遍历调用。
let fnArray = [];
let fn1 = () => { console.log(1) };
let fn2 = () => { console.log(2) };
fnArray.push(fn1);
fnArray.push(fn2);
fnArray.forEach(cb => cb());
复制代码

这段代码的运行结果是

1
2
复制代码
  1. 函数可以当作参数传递
function showYouFn(fn1, fn2) {
    // 调用
    fn1();
    fn2();
}

let myFn1 = () => { console.log(3); };
let myFn2 = () => { console.log(4); };

showYouFn(myFn1, myFn2);
复制代码

回想一下：把函数名当变量用。

实现

下面是一个简陋得不像Promise的Promise实现

function MyPromise(fn) {
    function resolve(value) {
        console.log(value);
    }
    function reject(value) {
        console.log(value);
    }
    
    fn(resolve, reject);
}
复制代码

现在你就可以用上自定义的Promise了

new MyPromise((resolve, reject) => {
    setTimeout(()=>{
        resolve('你看到我啦!');
    }, 2000);
});
复制代码

将会在2秒后输出

你看到我啦!
复制代码

下面的代码效果和上面的一样，写出来是为了再次强调：函数当变量用。

let promiseFn = (resolve, reject) => {
    setTimeout(()=>{
        resolve('你看到我啦!');
    }, 2000);
};
new MyPromise(promiseFn);
复制代码

解释一下整体代码：

MyPromise 中的参数 fn 是需要用户传入的自定义函数（该函数需要接收两个参数）。

MyPromise 中的内部还有两个函数 resolve 和 reject，其中 resolve 表示用户的异步任务成功时应该调用的函数，reject 表示用户的异步任务失败时该调用的函数。

那用户如何调用 resolve 和 reject 呢？

很简单，把两个函数当作 fn的参数传递出去即可。

所以 MyPromise 内部在调用 fn 时会把 resolve 和 reject当作参数传递给 fn。

然后用户在自定义函数内调用 resolve 或 reject 来通知 MyPromise 异步任务已经执行完了。

建议复制下面的代码去控制台试试

function MyPromise(fn) {
    function resolve(value) {
        console.log(value);
    }
    function reject(value) {
        console.log(value);
    }
    
    fn(resolve, reject);
}

new MyPromise((resolve, reject) => {
    setTimeout(()=>{
        resolve('你看到我啦!');
    }, 2000);
});
复制代码

通过上面的代码可以发现一个问题，我们不知道Promise的异步任务进行到哪一步了、是成功还是失败了。

所以增加三个状态用来标识一个Promise的异步任务进行到何种程度了。

pending、resolved、rejected 分别表示 执行中、已完成、已失败。

然后通过观察用户调用的是 resolve 还是 reject 可以判断当前Promise的状态。

那么会有三种情况：

  1. 在用户调用 resolve 或 reject 之前状态是 pending
  2. 用户调用 resolve 时，状态将变为 resolved
  3. 用户调用 reject 时，状态将变为 rejected

下面进行代码的改造，定义了三个常量表示状态以及一个变量 state 用来存储当前状态。

并且当 resolve 被调用时将 state 修改为 resolved 。

const PENDING = 'pending';
const RESOLVED = 'resolved';
const REJECTED = 'rejected';

function MyPromise(fn) {

    const that = this;
    // 初始时状态为执行中，即pending
    that.state = PENDING;

    function resolve(value) {
        console.log(value);
        // resolve被调用时修改状态
        that.state = RESOLVED;
    }
    function reject(value) {
        console.log(value);
        // reject被调用时修改状态
        that.state = REJECTED;
    }
    
    fn(resolve, reject);
}
复制代码

OK，现在已经能知道Promise当前所处的状态了，但是任务完了得拿到结果吧，MyPromise 的 resolve 被调用，那也只是MyPromise知道任务完成了，用户还不知道呢。

所以我们需要回调函数告诉用户，是的，其实就是回调函数。

这时候就轮到 then 方法出场了，用户通过then方法传入回调函数， MyPromise 将在成功调用 resolve 时调用用户传入的回调函数。

开始改造代码，MyPromise 内部需要变量存储回调函数，then 方法的作用就是将用户传入的回调函数赋予 MyPromise 内的变量。

所以 then 方法长这样，接收两个参数，一个是成功时的回调函数，一个是失败时的回调函数。

const PENDING = 'pending';
const RESOLVED = 'resolved';
const REJECTED = 'rejected';

function MyPromise(fn) {
    const that = this;
    that.state = PENDING;
    
    // 两个存储回调函数的变量
    that.resolvedCallback;
    that.rejectedCallback;

    function resolve(value) {
        console.log(value);
        that.state = RESOLVED;
        // 调用用户的回调函数，并告知结果
        that.resolvedCallback && that.resolvedCallback(value);
    }
    function reject(value) {
        console.log(value);
        that.state = REJECTED;
        // 调用用户的回调函数，并告知结果
        that.rejectedCallback && that.rejectedCallback(value);
    }
    
    fn(resolve, reject);
}


MyPromise.prototype.then = function(onFulfilled, onRejected) {
    const that = this;
    that.resolvedCallback = onFulfilled;
    that.rejectedCallback = onRejected;
}
复制代码

是的，一个简版Promise几乎大功告成，让我们再试试在浏览器执行如下代码（注意我删除了 resolve 和 reject 里的console语句）

(function () {
    const PENDING = 'pending';
    const RESOLVED = 'resolved';
    const REJECTED = 'rejected';
    function MyPromise(fn) {
        const that = this;
        that.state = PENDING;
        
        // 两个存储回调函数的变量
        that.resolvedCallback;
        that.rejectedCallback;
    
        function resolve(value) {
            that.state = RESOLVED;
            // 调用用户的回调函数，并告知结果
            that.resolvedCallback && that.resolvedCallback(value);
        }
        function reject(value) {
            that.state = REJECTED;
            // 调用用户的回调函数，并告知结果
            that.rejectedCallback && that.rejectedCallback(value);
        }
        
        fn(resolve, reject);
    }
    
    
    MyPromise.prototype.then = function(onFulfilled, onRejected) {
        const that = this;
        that.resolvedCallback = onFulfilled;
        that.rejectedCallback = onRejected;
    }
    
    new MyPromise((resolve, reject) => {
        setTimeout(() => {
            resolve('你又看到我啦~');
        }, 2000);
    }).then(value => {
        console.log(value);
    });
})();
复制代码

上面的代码，用法上已经和Promise长得差不多了，但是如果我们多次调用 then 方法呢？

是的，只有最后一个 then 方法里的回调函数能执行，这当然没法满足我们的需要。

于是，将两个回调函数改成函数数组（请回想一下前置知识），并在状态更改时遍历调用回调函数。

改造后的代码如下：

const PENDING = 'pending';
const RESOLVED = 'resolved';
const REJECTED = 'rejected';
function MyPromise(fn) {
    const that = this;
    that.state = PENDING;
    
    // 注意这里变成了两个数组
    that.resolvedCallbackArray = [];
    that.rejectedCallbackArray = [];

    function resolve(value) {
        that.state = RESOLVED;
        // 遍历用户的回调函数，告知结果
        that.resolvedCallbackArray.forEach(cbFn => cbFn(value));
    }
    function reject(value) {
        that.state = REJECTED;
        // 遍历用户的回调函数，告知结果
        that.rejectedCallbackArray.forEach(cbFn => cbFn(value));
    }
    
    fn(resolve, reject);
}
    
MyPromise.prototype.then = function(onFulfilled, onRejected) {
    const that = this;
    that.resolvedCallbackArray.push(onFulfilled);
    that.rejectedCallbackArray.push(onRejected);
    
    // 这里是为了链式调用，即myPromise.then().then().then()...
    return that;
}
复制代码

现在我们可以多次调用 then 方法了。试试在控制台运行下面的代码：

(function () {
    const PENDING = 'pending';
    const RESOLVED = 'resolved';
    const REJECTED = 'rejected';
    function MyPromise(fn) {
        const that = this;
        that.state = PENDING;
        
        // 注意这里变成了两个数组
        that.resolvedCallbackArray = [];
        that.rejectedCallbackArray = [];
    
        function resolve(value) {
            that.state = RESOLVED;
            // 遍历用户的回调函数，告知结果
            that.resolvedCallbackArray.forEach(cbFn => cbFn(value));
        }
        function reject(value) {
            that.state = REJECTED;
            // 遍历用户的回调函数，告知结果
            that.rejectedCallbackArray.forEach(cbFn => cbFn(value));
        }
        
        fn(resolve, reject);
    }
        
    MyPromise.prototype.then = function(onFulfilled, onRejected) {
        const that = this;
        that.resolvedCallbackArray.push(onFulfilled);
        that.rejectedCallbackArray.push(onRejected);
        return that;
    }
    
    new MyPromise((resolve, reject) => {
        setTimeout(() => {
            resolve('你又看到我啦~');
        }, 2000)
    }).then(value => {
        console.log('第一次', value);
    }).then(value => {
        console.log('第二次', value);
    });
})();
复制代码

上面已经是简版Promise的实现了。

但是我们还可以更完善一点，增强 MyPromise 的健壮性。

例如，若用户自定义函数在执行过程中发生了错误，会中断程序的执行，于是我们增加try...catch...语句，并在发生错误时主动执行reject函数告知用户。

try {
    fn(resolve, reject);
} catch (e) {
    reject(e);
}
复制代码

又或者，对参数进行校验，状态进行判断等，以 then为例，若用户传入的参数不是函数呢？ 或者Promise的状态已经时rejected或resolved，此时调用then呢？

改造 then 后代码如下：

MyPromise.prototype.then = function(onFulfilled, onRejected) {
    if(typeof onRejected !== 'function') {
        onRejected = v => v;
    }
    if(typeof onFulfilled !== 'function') {
        onFulfilled = v => { throw r };
    }
    const that = this;
    if (that.state === PENDING) {
        that.resolvedCallbacks.push(onFulfilled)
        that.rejectedCallbacks.push(onRejected)
    }
    if (that.state === RESOLVED) {
        onFulfilled(that.value)
    }
    if (that.state === REJECTED) {
        onRejected(that.value)
    }
}
复制代码

还有其他方法在理解了基本原理之后可以自己根据规范改造，本文到此告一段落，感谢阅读。

转载于:https://juejin.im/post/5d2470a46fb9a07eea32986b

weixin_30246221
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
promise简单实现
qq_39692513的博客
06-16 1006
promise简单实现
Promise的简单实现
qq_39353677的博客
04-04 196
JS中Promise的简单实现 什么是Promise 简单点来说就是异步，存在的意义在于将多级嵌套的异步调用（回调地狱）变为链式结构来处理，这篇博文主要说一个自己的简单实现思路。（有不对的请指正） Promise简单实例 下面是一个简单的Promise实例 new Promise((resolve, reject) => { setTimeout(() => { resolve(...
Promise用法及理解
Leo_zjk的博客
06-30 1470
Promise用法及理解
C# Promise对象详解
qq_35320456的博客
04-18 1109
C# Promise对象详解
推荐项目：QtPromise - 强大的Qt异步编程解决方案
gitblog_00091的博客
05-26 469
推荐项目：QtPromise - 强大的Qt异步编程解决方案 qtpromisePromises/A+ implementation for Qt/C++项目地址:https://gitcode.com/gh_mirrors/qt/qtpromise QtPromise 是一个为 Qt/C++ 开发者量身定制的 Promises/A+ 规范实现库。这个开源项目旨在提供一种更简洁、更易于理解和维...
C# 实现简易Promise链式调用【请求链】
王雪亮
09-07 344
请求链式调用
for循环中进行Promise异步操作的问题总结
热门推荐
不能说的秘密的博客
06-20 3万+
笔者在for循环中进行Promise异步操作的时候，主要会遇到两个问题: 一是如何让所有的for循环中的Promise操作结束后执行某个操作 二是循环中如果后一个Promise的执行依赖与前一个Promise的执行结果(例如对于某个数据库操作)
promises:PromisesA+ 规范的超级简单实现，适用于 lulz
07-05
本项目标题提到的"Promises:A+规范的超级简单实现，适用于lulz"，意味着它提供了一个简化的Promise实现，符合Promises/A+规范，方便开发者理解和学习。 Promises/A+规范是Promise标准的一种，它定义了Promise的核心...
《超实用的JavaScript代码段》PDF版本下载.txt
07-17
《超实用的JavaScript代码段》PDF版本下载提供了丰富的JavaScript代码片段，涵盖了从基础到进阶的多个方面。无论是新手还是有一定经验的开发者，都可以从中受益匪浅。通过实践这些代码段，不仅可以加深对JavaScript...
vue-resoure-self:vue原始码简版
03-22
在"Vue-Resoure-Larn"这个项目中，我们可以看到 "vue-resoure-self-main" 文件，这很可能是对 Vue-Resource 源码的一个简化版或自定义实现。Vue-Resource 的源码分析将帮助我们理解如何在 Vue 中集成网络请求功能，...
C-Sharp-Promise：用于C＃的Promises库，用于管理异步操作
02-06
C尖锐的承诺 C＃的承诺库，用于管理异步操作。 受JavaScript承诺启发，但略有不同。 由使用，用于在Unity3d上构建严肃的游戏和模拟。 如果您对使用诺言进行游戏开发和Unity感兴趣，请参阅。 最近更新 v3.0（2018年2月15日） 最后经过修改，使其工作方式与JavaScript中的一致。 增加了对在诺言中报告进度的支持。 用强名签名的程序集。 错误会引发自定义异常类型，而不是通用异常类型。 修改了然后的重载没有意义。 v2.0（2017年12月4日） 然后，在处理异常而不是终止之后，现在运行在Catch之后链接的函数 捕捉可以返回，将被传递到下一个然
qtpromise：QtC ++的PromisesA +实现
02-05
qtpromise：QtC ++的PromisesA +实现
promise_source:学习诺言源
05-09
如果使用这些，您的代码将在每个新发行版中破坏。安装服务器： $ npm install promise客户： 您可以在客户端上使用browserify，也可以使用充当polyfill的预编译脚本。 < script src =" ...
co-waiter:轻量级的基于 promise 的 waitsetTimeout 接口（设计用于 co）
06-04
我写这个模块只是为了让我有一个简单的方法来使用诸如yield wait.seconds(30);类的东西yield wait.seconds(30); 在我基于的工作流程中。 提供以下方法。 每个都等待一段时间，然后解决一个承诺。 如果传递了v参数...
Qt优秀开源项目之十七：QtPromise
草上爬的博客
03-21 5553
QtPromise是规范的Qt/C++实现。该规范的译文见附录。QtPromise基于Qt5.6及以上版本，当然也包括Qt6。，每个API都提供了demo。Promise是一种异步编程的解决方案，可以替代传统的解决方案——回调函数和事件。Promise的三个特点：☆对象的状态不受外界影响。☆一旦状态改变了就不会在变，也就是说任何时候Promise都只有一种状态。☆以同步的方式调用异步，通过返回新的promise来实现then链式调用。
Promise
qq_34498806的博客
07-22 264
Promise 作用：处理异步请求，将异步操作转化为同步的形式 思想：体现了 链式编程 异步操作之后有三种状态 pending： 等待状态，比如正在进行网络请求，或者定时器没有到时间 fulfill： 满足状态，当我们主动回调resolve时，就处于该状态，并且会回调 .then() reject： 拒绝状态，当我们主动回调reject时，就处于该转状态，并且会回调***.catch()*** Promise 的写法 /** * 什么情况下会用到Promise? * 一般情况下是有
并发编程 Promise, Future 和 Callback
chuhan0449的博客
06-20 223
在并发编程中，我们通常会用到一组非阻塞的模型：Promise，Future 和 Callback。其中的 Future 表示一个可能还没有实际完成的异步任务的结果，针对这个结果可以添加 Callback 以便在任务执行成功或失败后做出对应的操作，而 Promise 交由任务执行者，任务执行者通...
关于for 循环 内 的promise 的处理
xy_peng的博客
07-16 4380
最近在重构项目，其中有一棵树的接口，改为了两个接口返回json的数据拼接，不想改原来的组件，就在函数里面处理了下。遇到了这个问题： 先上代码： 新出现了一个比较预料之外的现象： 返回的数组里面是两个promise对象，没有预料中的同步返回数组。 分析了一波promise以及for循环： 代码改了一下： 得到了如下的结果： .map()里的处理方法是同步的，若想做异步操作，可以这样写。 // 使用async await 处理异步操作 let results = await
js 实现一个简单的 Promise 构造函数
最新发布
07-26
下面是一个基础的 `Promise` 的实现示例： ```javascript function simplePromise(value) { return new Promise(function(resolve, reject) { // 根据值判断是否是已经成功的状态 if (value === true) { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值