动手写一个简单的 Promise.js
分类于 Javascript
发表于 2018-01-24
作者: 灼灼团队
本文字数: 1408
阅读时长 ≈ 4.7 分钟

初学 Node.js 的朋友总会耗一番周折去理解 Promise,这里给出一个最简单的 Promise 实现,以帮助对 Promise 还有疑惑的同学彻底理解其实现原理。

这个代码应该是三年前我刚接触 Node.js 的时候写的了,当时也是 Google 不少关于 Promise 的文章,现在已经不记得相关链接了。

这个并不是完整的 Promise 逻辑,旨在理解 Promise 的实现原理,由于过了太久,我就直接贴出来代码不做解释说明了。如果先前有用过 Promise 的话,应该还是较容易理解的; 若是初接触,这个逻辑还是有点绕,先去其它地方了解 Promse 的用法,再多花点时间去理一理这段代码,是值得的。

// Promise
function Promise(fn) {
    var self = this
    self.state = 'PENDING'
    self.onFulfilled = null
    self.onRejected = null
    self.then = function (onResolved, onRejected) {
        var that = this;
        return new Promise(function (resolve, reject) {
            that.onFulfilled = function (val) {
                var ret = onResolved ? onResolved(val) : val;
                if (ret && ret.then) {
                    ret.then(function (val) {
                        resolve(val)
                    })
                }
                else {
                    resolve(ret);
                }
            };
            that.onRejected = function (val) {
                var ret = onRejected ? onRejected(val) : val;
                reject(ret);
            };
        });
    }
    fn && fn(function (result) {
        if (self.state === 'PENDING') {
            self.state = 'FULFILLED';
            setTimeout(function(){
                self.onFulfilled && self.onFulfilled(result);
            },0)
        }
    }, function (reason) {
        if (self.state === 'PENDING') {
            self.state = 'REJECTED';
            self.onRejected && self.onRejected(reason);
        }
    });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

使用示例:

function sleep(t) {
    return new Promise((resolve, reject) => {
        setTimeout(function () {
            console.log(t)
            resolve(t)
        }, t)
    })
}

sleep(1000)
    .then(data => sleep(data + 1))
    .then(data => sleep(data + 1))
    .then(data => sleep(data + 1))
1
2
3
4
5
6
7
8
9
10
11
12
13
联系我们
联系电话:17681177133
联系邮箱:admin@zhuo-zhuo.com
公司地址:合肥市高新区习友路2666号 (习友路和石莲南路交叉口西北角)二期304室
官网
博客
皖ICP备20009670号-2
合肥灼灼信息技术有限公司 | Copyright © 2020-present zhuo-zhuo.com