复制
1// 模拟实现Promise
2// Promise利用三大手段解决回调地狱：
3// 1. 回调函数延迟绑定
4// 2. 返回值穿透
5// 3. 错误冒泡
6
7// 定义三种状态
8const PENDING = 'PENDING';      // 进行中
9const FULFILLED = 'FULFILLED';  // 已成功
10const REJECTED = 'REJECTED';    // 已失败
11
12class Promise {
13  constructor(exector) {
14    // 初始化状态
15    this.status = PENDING;
16    // 将成功、失败结果放在this上，便于then、catch访问
17    this.value = undefined;
18    this.reason = undefined;
19    // 成功态回调函数队列
20    this.onFulfilledCallbacks = [];
21    // 失败态回调函数队列
22    this.onRejectedCallbacks = [];
23
24    const resolve = value => {
25      // 只有进行中状态才能更改状态
26      if (this.status === PENDING) {
27        this.status = FULFILLED;
28        this.value = value;
29        // 成功态函数依次执行
30        this.onFulfilledCallbacks.forEach(fn => fn(this.value));
31      }
32    }
33    const reject = reason => {
34      // 只有进行中状态才能更改状态
35      if (this.status === PENDING) {
36        this.status = REJECTED;
37        this.reason = reason;
38        // 失败态函数依次执行
39        this.onRejectedCallbacks.forEach(fn => fn(this.reason))
40      }
41    }
42    try {
43      // 立即执行executor
44      // 把内部的resolve和reject传入executor，用户可调用resolve和reject
45      exector(resolve, reject);
46    } catch(e) {
47      // executor执行出错，将错误内容reject抛出去
48      reject(e);
49    }
50  }
51  then(onFulfilled, onRejected) {
52    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
53    onRejected = typeof onRejected === 'function'? onRejected :
54      reason => { throw new Error(reason instanceof Error ? reason.message : reason) }
55    // 保存this
56    const self = this;
57    return new Promise((resolve, reject) => {
58      if (self.status === PENDING) {
59        self.onFulfilledCallbacks.push(() => {
60          // try捕获错误
61          try {
62            // 模拟微任务
63            setTimeout(() => {
64              const result = onFulfilled(self.value);
65              // 分两种情况：
66              // 1. 回调函数返回值是Promise，执行then操作
67              // 2. 如果不是Promise，调用新Promise的resolve函数
68              result instanceof Promise ? result.then(resolve, reject) : resolve(result);
69            })
70          } catch(e) {
71            reject(e);
72          }
73        });
74        self.onRejectedCallbacks.push(() => {
75          // 以下同理
76          try {
77            setTimeout(() => {
78              const result = onRejected(self.reason);
79              // 不同点：此时是reject
80              result instanceof Promise ? result.then(resolve, reject) : resolve(result);
81            })
82          } catch(e) {
83            reject(e);
84          }
85        })
86      } else if (self.status === FULFILLED) {
87        try {
88          setTimeout(() => {
89            const result = onFulfilled(self.value);
90            result instanceof Promise ? result.then(resolve, reject) : resolve(result);
91          });
92        } catch(e) {
93          reject(e);
94        }
95      } else if (self.status === REJECTED) {
96        try {
97          setTimeout(() => {
98            const result = onRejected(self.reason);
99            result instanceof Promise ? result.then(resolve, reject) : resolve(result);
100          })
101        } catch(e) {
102          reject(e);
103        }
104      }
105    });
106  }
107  catch(onRejected) {
108    return this.then(null, onRejected);
109  }
110  static resolve(value) {
111    if (value instanceof Promise) {
112      // 如果是Promise实例，直接返回
113      return value;
114    } else {
115      // 如果不是Promise实例，返回一个新的Promise对象，状态为FULFILLED
116      return new Promise((resolve, reject) => resolve(value));
117    }
118  }
119  static reject(reason) {
120    return new Promise((resolve, reject) => {
121      reject(reason);
122    })
123  }
124  static all(promiseArr) {
125    const len = promiseArr.length;
126    const values = new Array(len);
127    // 记录已经成功执行的promise个数
128    let count = 0;
129    return new Promise((resolve, reject) => {
130      for (let i = 0; i < len; i++) {
131        // Promise.resolve()处理，确保每一个都是promise实例
132        Promise.resolve(promiseArr[i]).then(
133          val => {
134            values[i] = val;
135            count++;
136            // 如果全部执行完，返回promise的状态就可以改变了
137            if (count === len) resolve(values);
138          },
139          err => reject(err),
140        );
141      }
142    })
143  }
144  static race(promiseArr) {
145    return new Promise((resolve, reject) => {
146      promiseArr.forEach(p => {
147        Promise.resolve(p).then(
148          val => resolve(val),
149          err => reject(err),
150        )
151      })
152    })
153  }
154}
155