3-4 JS异步-CSDN博客

const url1 = '/data1.json';
const url2 = '/data2.json';
const url3 = '/data3.json';
getData(url1).then(data1 => {
    console.log(data1);
    return getData(url2);
}).then(data2 => {
    console.log(data2);
    return getData(url3);
}).then(data3 => {
    console.log(data3);
}).catch(err => console.log(err));

function getData(url) {
    return new Promise((resolve, reject) => {
            $.ajax({
                url,
                success(data) {
                    resolve(data)
                },
                error(err) {
                    reject(err)
                }
            })
        }

    )
}

三种状态

pending resolved rejected
pending->resolved或pending->rejected
变化不可逆

状态的表现和变化

pending状态，不会触发then和catch
resolved状态，会触发后续的then回调函数
rejected状态，会触发后续的catch回调函数

then和catch对状态的影响

then正常返回resolved，里面有报错则返回rejected
catch正常返回resolved，里面有报错则返回rejected

// catch正常返回resolved情况
const p1 = Promise.reject('1').catch(err => {
    console.error(err)
})
console.log('p1',p1); // resolved 注意！ 触发 then 回调
p1.then(() => {
    console.log(11)
})

const p2 = Promise.reject('2').catch(err => {
    throw new Error('catch err')
})
console.log('p2',p2); // rejected 触发 catch 回调
p2.then(() => {
    console.log(2)
}).catch(() => {
    console.log('打印')
})

手写Promise

初始化 & 异步调用
then catch 链式调用
API .resolve .reject .all .race

const p1 = new MyPromise((resolve,reject) => {
    resolve(100);
    // serTimeout(() => {
    //     resolve(100)
    // },500)
})

const p11 = p1.then(data => {
    return data + 1;
})
const p12 = p11.then(data => {
    return data + 2;
})
const p13 = p12.catch(err => console.error(err));


const p2 = MyPromise.resolve(200);
const p3 = MyPromise.reject('err..');
const p4 = MyPromise.all([p1,p2]);
const p5 = MyPromise.race([p1,p2]);

class MyPromise {
    state = 'pending'; // 状态，'pending' 'fulfilled' 'rejected'
    value = undefined; // 成功后的值
    reason = undefined; // 失败后的原因

    resolveCallbacks = []; // pending 状态下，存储成功的回调
    rejectCallbacks = []; // pending 状态下，存储失败的回调

    constructor(fn) {
        const resolveHandler = (value) => {
            if(this.state === 'pending') {
                this.state = 'fulfilled';
                this.value = value;
                this.resolveCallbacks.forEach(fn => fn(this.value));
            }
        }
        
        const rejectHandler = (reason) => {
            if(this.state === 'pending') {
                this.state = 'rejected';
                this.reason = reason;
                this.rejectCallbacks.forEach(fn => fn(this.reason));
            }
        }

        try {
            fn(resolveHandler,rejectHandler)
        } catch (err) {
            rejectHandler(err)
        }
    }

    then (fn1,fn2) {
        // 当 pending 状态下， fn1 fn2会被存储到 callbacks 中
        fn1 = typeof fn1 === 'function' ? fn1 : (v) => v;
        fn2 = typeof fn2 === 'function' ? fn2 : (e) => e;
        
        if(this.state === 'pending') {
            const p1 = new MyPromise((resolve,reject) => {
                this.resolveCallbacks.push(() => {
                    try {
                        const newValue = fn1(this.value);
                        resolve(newValue);
                    } catch (err) {
                        reject(err)
                    }
                })

                this.rejectCallbacks.push(() => {
                    try {
                        const newReason = fn2(this.reason);
                        reject(newReason);
                    } catch (err) {
                        reject(err)
                    }
                })

            })
        }

        if(this.state === 'fulfilled') {
            const p1 = new MyPromise((resolve,reject) => {
                try {
                    const newValue = fn1(this.value);
                    resolve(newValue);
                } catch (err) {
                    reject(err);
                }
            })
            return p1;
        }

        if(this.state === 'rejected') {
            const p1 = new MyPromise((resolve,reject) => {
                try {
                    const newReason = fn2(this.reason);
                    reject(newReason);
                } catch (err) {
                    reject(err);
                }
            })
            return p1;
        }

    }

    // 就是then的一个语法糖，简单模式
    catch (fn) {
        return this.then(null,fn);
    }
}

MyPromise.resolve = function(value){
    return new MyPromise((resolve,reject) => resolve(value)); 
}

MyPromise.reject = function(reason){
    return new MyPromise((resolve,reject) => reject(reason)); 
}

// all传入promise数组，等待所有都fulfill之后，返回新promise，包含前面所有的结果

MyPromise.all = function (promiseList = []){
    const p1 = new MyPromise((resolve,reject) => {
        const result = []; // 存储promiseList所有信息
        const length = promiseList.length;
        let resolvedCount = 0;
    
        promiseList.forEach(p => {
            p.then(data => {
                result.push(data);
                // resolvedCount必须在then里面++
                // 不能用index
                resolvedCount++;
                if(resolvedCount === length){
                    // 已经遍历到最后一个promise
                    resolve(result);
                }
            }).catch(err => {
                reject(err);
            })
        })
    })
    return p1;
}

// race传入promise数字，只要有一个fulfill即可返回
MyPromise.race = function (promiseList = []){
    let resolved = false; // 标记
    const p1 = new MyPromise((resolve,reject) => {
        promiseList.forEach(p => {
            p.then(data => {
                if(!resolved) {
                    resolve(data)
                    resolved = true
                }
            }).catch((err) => {
                reject(err);
            })
        })
    })
    return p1;
}