Chqx PlaygroundAppearance
手写Promise
基本构造
ts
class MyPromise {
/** 状态 */
_state: "pendding" | "fulfilled" | "rejected";
/** 数据 */
_value: any;
constructor(executor) {
this._state = "pendding";
this._value = undefined;
executor(this._resolve.bind(this), this._resolve.bind(this));
}
/**
* 标记当前任务完成
* @param {any} data 任务完成的相关数据
*/
_resolve(data: any) {
// 改变状态和数据
this._state = "fulfilled";
this._value = data;
}
/**
* 标记当前任务失败
* @param {any} reason 任务失败时的相关数据
*/
_reject(reason: any) {
this._state = "rejected";
this._value = reason;
}
}
new MyPromise((resolve, reject) => {
resolve(123);
});class MyPromise {
/** 状态 */
_state: "pendding" | "fulfilled" | "rejected";
/** 数据 */
_value: any;
constructor(executor) {
this._state = "pendding";
this._value = undefined;
executor(this._resolve.bind(this), this._resolve.bind(this));
}
/**
* 标记当前任务完成
* @param {any} data 任务完成的相关数据
*/
_resolve(data: any) {
// 改变状态和数据
this._state = "fulfilled";
this._value = data;
}
/**
* 标记当前任务失败
* @param {any} reason 任务失败时的相关数据
*/
_reject(reason: any) {
this._state = "rejected";
this._value = reason;
}
}
new MyPromise((resolve, reject) => {
resolve(123);
});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
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
代码封装和优化
- 处理resolve和reject的调用问题；
- 处理有报错的问题。
ts
type PromseState = "pendding" | "fulfilled" | "rejected";
class MyPromise {
/** 状态 */
_state: PromseState;
/** 数据 */
_value: any;
constructor(executor) {
this._state = "pendding";
this._value = undefined;
try {
executor(this._resolve.bind(this), this._resolve.bind(this));
} catch (error) {
this._reject(error);
}
}
/**
* 更改任务状态
* @param {PromseState} newState 新状态
* @param {any} value 相关数据
*/
_changeState(newState: PromseState, value: any) {
if (this._state !== "pendding") {
// 目前状态已更新
return;
}
this._state = newState;
this._value = value;
}
/**
* 标记当前任务完成
* @param {any} data 任务完成的相关数据
*/
_resolve(data: any) {
this._changeState("fulfilled", data);
}
/**
* 标记当前任务失败
* @param {any} reason 任务失败时的相关数据
*/
_reject(reason: any) {
this._changeState("rejected", reason);
}
}
new MyPromise((resolve, reject) => {
resolve(1);
resolve(2);
reject(3);
throw new Error("123");
});type PromseState = "pendding" | "fulfilled" | "rejected";
class MyPromise {
/** 状态 */
_state: PromseState;
/** 数据 */
_value: any;
constructor(executor) {
this._state = "pendding";
this._value = undefined;
try {
executor(this._resolve.bind(this), this._resolve.bind(this));
} catch (error) {
this._reject(error);
}
}
/**
* 更改任务状态
* @param {PromseState} newState 新状态
* @param {any} value 相关数据
*/
_changeState(newState: PromseState, value: any) {
if (this._state !== "pendding") {
// 目前状态已更新
return;
}
this._state = newState;
this._value = value;
}
/**
* 标记当前任务完成
* @param {any} data 任务完成的相关数据
*/
_resolve(data: any) {
this._changeState("fulfilled", data);
}
/**
* 标记当前任务失败
* @param {any} reason 任务失败时的相关数据
*/
_reject(reason: any) {
this._changeState("rejected", reason);
}
}
new MyPromise((resolve, reject) => {
resolve(1);
resolve(2);
reject(3);
throw new Error("123");
});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
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
微队列函数的封装
看一下下面的js代码
html
<script>
const p = document.createElement("p");
setTimeout(function () {
console.log(1);
});
const observer = new MutationObserver(function () {
console.log("变化了");
});
observer.observe(p, {
childList: true // 观察该元素内部的变化
});
p.innerHTML = "1";
console.log(2);
</script><script>
const p = document.createElement("p");
setTimeout(function () {
console.log(1);
});
const observer = new MutationObserver(function () {
console.log("变化了");
});
observer.observe(p, {
childList: true // 观察该元素内部的变化
});
p.innerHTML = "1";
console.log(2);
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
执行后的结果
consle
2
变化了
12
变化了
11
2
3
2
3
现在我们就可以用它来模拟微队列
ts
/**
* 运行一个微队列任务
* 把传递的函数放在微队列中
* @param {Function} callback
*/
function runMicroTask(callback: VoidFunction) {
// 判断node环境
if (process && process.nextTick) {
process.nextTick(callback);
} else if (queueMicrotask) {
// 浏览器环境, 也可以通过 MutationObserver 来模拟实现
queueMicrotask(callback);
} else {
// 兜底方案
setTimeout(callback, 0);
}
}/**
* 运行一个微队列任务
* 把传递的函数放在微队列中
* @param {Function} callback
*/
function runMicroTask(callback: VoidFunction) {
// 判断node环境
if (process && process.nextTick) {
process.nextTick(callback);
} else if (queueMicrotask) {
// 浏览器环境, 也可以通过 MutationObserver 来模拟实现
queueMicrotask(callback);
} else {
// 兜底方案
setTimeout(callback, 0);
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
then函数的创建
TODO
执行队列函数
TODO
核心代码实现
TODO