40行js实现一个简易Promise

nihao 发布于2019-08-22 15:13 / 417人阅读

摘要：最近面试有问到的原理，以及实现的方法。所以自己动手实现了一个，发个文章记录下。简单分析下，实例对象有两个属性，一个是，一个是。

最近面试有问到Promise的原理，以及实现的方法。所以自己动手实现了一个，发个文章记录下。
简单分析下，promise实例对象有两个属性，一个是status，一个是value。还有一个then方法。
status有3个状态，pending,resolved,rejected。value就是then回调的时候传的值。
下面是代码

/* 
  原生js模拟promise
*/
const PromisePolyfill = (() => {
    //状态管理
    const promiseStatusSymbol = Symbol("PromiseStatus");
    const promiseValueSymbol = Symbol("PromiseValue");
    const STATUS = {
        PENDING: "PENDING",
        FULFILLED: "FULFILLED",
        REJECTED: "REJECTED"
    };
    //resolve操作设置值和状态
    function resolve() {
        this[promiseValueSymbol] = arguments[0];
        this[promiseStatusSymbol] = STATUS["FULFILLED"];
    }
    //reject操作设置值和状态
    function reject() {
        this[promiseValueSymbol] = arguments[0];
        this[promiseStatusSymbol] = STATUS["REJECTED"];
    }

    class myPromise {
        constructor(resolver) {
            if (typeof resolver !== "function") {
                throw new TypeError(`parameter 1 must be a function, but get a ${typeof func}`);
            }
            this[promiseStatusSymbol] = STATUS["PENDING"];//初始状态为pending
            resolver(
                resolve.bind(this),//绑定promise实例对象
                reject.bind(this)
            );
        }
        then(callback) {
            //开一个定时器监听状态变化，如果有变化则执行callback
            const interval = setInterval(() => {
                if (this[promiseStatusSymbol] === "FULFILLED" || this[promiseStatusSymbol] === "REJECTED") {
                    clearInterval(interval);
                    callback(this[promiseValueSymbol], resolve.bind(this), reject.bind(this));
                    this[promiseStatusSymbol] = "PENDING";//执行完后把状态改回，方便下一个then方法进行定时轮询
                }
            });
            return this;
        }
    }
    return myPromise;
})();

写完了丢到控制台测试，完美预期运行

//测试，下面会先打印出111，再打印出222，333
new PromisePolyfill(function (resolve, reject) {
    setTimeout(() => {
        resolve(222);
        console.log(111)
    }, 1000);
}).then(function (res, resolve, reject) {
    setTimeout(() => {
        resolve(333);
        console.log(res)
    }, 3000);
}).then(function (res, resolve, reject) {
    console.log(res);
});

代码github地址：https://github.com/leeseean/P...

GPU云服务器云服务器 js简易留言板实现用js或jquery实现添加行 jquery_promise实现原生js简易日历

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93277.html

3行代码实现一个简易版promise

前言作为一个后端过来的同学,刚入门前端的时候,被js种种「反人类」的概念折腾的死去活来的.其中一个印象比较深刻的,就是promise,感觉实在太难理解了...所有就有了写个简单的promise的想法.希望能帮助到一些跟我一样,感觉promise很难理解的新同学. promise的教程网上多如牛毛,其中写的比较通俗易懂的莫过于阮一峰的es6,反正我是他的书才懂的.所以今天,我们也不会来复述一遍如何...

ralap 2019-08-22 17:33 评论0 收藏0
Browserify简易入坑指南

摘要：简要说明长处在于使用模块规范，而不是使用的模块规范，以及使用的模块规范。简单使用关于命令行工具使用，请参照官方文档。相同模块重复依赖模块重复依赖很容易理解，模块实现时可能分割为多个子文件实现，每个子文件内部可能会引用同一个模块，如。简介 browerify: http://browserify.org/index.html browserify可以看做浏览器端的又一个模块...

vpants 2019-08-21 10:30 评论0 收藏0
【js】what is Promise和手写实现简易版Promise

摘要：有三种状态，等待中，已完成，已失败。对象状态不受外界影响，只有异步操作的结果可以改变状态，这就是的由来怎么用接受一个函数作为参数，这个参数函数的两个参数分别是和，用来执行了两种状态的回调函数。当实例生成后，用方法来指定两种状态的回调函数。什么是Promise 官方的解释：Promise是一个用来传递异步操作消息的对象。Promise有三种状态，pending（等待中），resolve...

LMou 2019-08-23 18:25 评论0 收藏0
nodeJS实现基于Promise爬虫定时发送信息到指定邮件

摘要：也就是说，我的篇文章的请求对应个实例，这些实例都请求完毕后，执行以下逻辑他的目的在于对每一个返回值这个返回值为单篇文章的内容，进行方法处理。英国人Robert Pitt曾在Github上公布了他的爬虫脚本，导致任何人都可以容易地取得Google Plus的大量公开用户的ID信息。至今大概有2亿2千5百万用户ID遭曝光。亮点在于，这是个nodejs脚本，非常短，包括注释只有71行。 ...

xuweijian 2019-08-20 15:27 评论0 收藏0
2019 简易Web开发指南

摘要：工具软件欲先攻其事必先利其器，用好工具是做好开发的基础。框架目前最流行简单易用，越来越多人用曾经很流行，现在有点衰退状态管理后端渲染开发工具依赖管理，应用打包，任务管理，编辑器扩展，，移动端有了前端的知识后，我们还可以开发手机。 2019年即将到来，各位同学2018年辛苦了。不管大家2018年过的怎么样，2019年还是要继续加油的！在此我整理了个人认为在2019仍是或者将成为主流的...

vspiders 2019-05-28 17:11 评论0 收藏0