JS基础巩固系列：【8】手写一个简单的Promise

规范

Promise有一套标准的规范，Promises/A+，初步了解规范后，我们针对一些重要的点，实现一个简单的Promise函数

  1. 一个 Promise 的当前状态必须为以下三种状态中的一种：等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected）。
  2. 处于等待态时，
    • promise，可以迁移至执行态或拒绝态
  3. 处于执行态时，promise 需满足以下条件：
    • 不能迁移至其他任何状态
    • 必须拥有一个不可变的终值
  4. 处于拒绝态时，promise 需满足以下条件：
    • 不能迁移至其他任何状态
    • 必须拥有一个不可变的据因
  5. 一个promise必须提供then方法来访问其当前值、终值和据因。
  6. then 方法可以被同一个 promise 调用多次
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
const PENDING = 'pending';
const RESOLVED = 'resolved';
const REJECTED = 'rejected';

function MyPromise(func){
    const _this = this;
    _this.state = PENDING;
    _this.value = null;
    _this.resolveCallbacks = [];
    _this.rejectCallbacks = [];

    function resolve(value){
         if(_this.state === PENDING){
             _this.state = RESOLVED;
             _this.value = value;
             _this.resolveCallbacks.map(cb => cb(_this.value))
         }
    }

    function reject(value){
        if(_this.state === PENDING){
            _this.state = REJECTED;
            _this.value = value;
            _this.rejectCallbacks.map(cb => cb(_this.value))
        }
    }

    try{
        func(resolve, reject)
    }catch(err){
        reject(err)
    }
}
MyPromise.prototype.then = function(onResolve, onReject){
    console.log('then 方法执行')
    const _this = this;
    onResolve = typeof onResolve === 'function'? onResolve: v=>v;
    onReject = typeof onReject === 'function'? onReject: v=>{throw v};
    if(_this.state === PENDING){
        _this.resolveCallbacks.push(onResolve)
        _this.rejectCallbacks.push(onReject)
    }

    if(_this.state === RESOLVED){
        onResolve(_this.value);
    }

    if(_this.state === REJECTED){
        onReject(_this.value);
    }
}

let test = new MyPromise(function(resolve, reject){
    setTimeout(()=>{resolve('success')}, 2000)
})
test.then(function(result){
    console.log('第一次调用promise', result)
})
test.then(function(result){
    console.log('第二次调用promise', result)
})