总结一些知识点

Promise

  1. Promise 的状态分为:pedding/fulfilled/rejected

  2. Promise 的状态只能由 pedding -> fulfilled / rejected 一旦修改就不能再改变。

  3. promise.then(onFulfilled, onRejected) 中的 onRejected 不能捕获当前 onFulfilled 中的异常。

1
const PENDING = Symbol.for('pending');
2
const FULFILLRD = Symbol.for('fulfilled');
3
const REJECTED = Symbol.for('rejected');
4
5
function isPromise(val) {
6
    return val && typeof val.then === 'function'
7
}
8
9
10
function _Promise(fn) {
11
    this.status = Symbol.keyFor(PENDING);  // 定义出始状态 
12
    this.value = undefined; // fulfilled 状态时返回的信息
13
    this.reason = undefined; // rejected 状态时捕获的原因
14
    this.onFullfilledCbs = []; // 存储 fulfilled 状态时, 对应的 onFulfilled 函数
15
    this.onRejectedCbs = []; // 存储 rejected 状态时,对应的 onRejected 函数
16
    function resolve(value) {
17
        if(isPromise(value)) { // 如果传入的 value 是一个 promise 执行 then
18
            return value.then(resolve, reject);
19
        }
20
        setTimeout(() => {
21
            if(this.status === Symbol.for('pending')) {
22
                this.status = Symbol.keyFor(FULFILLRD)
23
                this.value = value;
24
                this.onFullfilledCbs.forEach(onFullfilled => onFullfilled(this.value))
25
            }
26
        })
27
    }
28
29
    function reject(reason) {
30
        setTimeout(() => {
31
            if(this.status === Symbol.for('pending')) {
32
                this.status = Symbol.keyFor(REJECTED)
33
                this.reason = reason;
34
                this.onRejectedCbs.forEach(onRejected => onRejected(this.value))
35
            }
36
        })
37
    }
38
39
    try {
40
        fn(resolve, reject);
41
    }catch (e) {
42
        reject(e);
43
    }
44
}

Symbol

  1. 获取 const KEY = Symbol.for(key) 中传入的 key 使用 Symbol.keyFor(KEY)
    1
    const PENDING = Symbol.for('pending');
    2
    Symbol.keyFor(PENDING) === 'pending' // true

Promise 接口的原生 API

  1. fetch 远程请求。

  2. FontFace.load() 加载字体。

  3. Response对象formData()text()json()blob()arrayBuffer()

  4. Blob 对象arrayBuffer()text()

  5. Image.decode()var img = new Image();img.src = 'nebula.jpg';img.decode().then(fn);

  6. 剪切板 navigator.clipboard.readText(), writeText()