Promise的使用与实现源码

Promise的使用与实现源码

使用01

const Promise = require('./P01.js');

const p = new Promise((resolve, reject) => {
    //ajax,定时器
    console.log(123);
    // throw new Error('Error');
    resolve('成功了');
    // reject('失败了');
});


p.then((data) => {
    console.log(data, 'success01');
}, (err) => {
    console.log(err, 'fail01');
});

p.then((data) => {
    console.log(data, 'success02');
}, (err) => {
    console.log(err, 'fail02');
});

console.log(456);

/*
        myFunc
        123
        成功了 success01
        成功了 success02
        456
*/

Promise源码01

const DENG = 'DENG';    //等待态
const CHENG = 'CHENG';  //成功态
const SHI = 'SHI';      //失败态
class Promise {
    constructor(myFunc) {
        console.log('myFunc');
        this.status = DENG;
        //成功的参数
        this.value = undefined;
        //失败的参数
        this.reason = undefined;
        //失败回调函数
        let reject = (r) => {
            if (this.status === DENG) {
                this.status = SHI;
                this.reason = r;
            }
        };
        //成功回调函数
        let resolve = (v) => {
            if (this.status === DENG) {
                this.status = CHENG;
                this.value = v;
            }
        }
        //异常处理01
        try {
            myFunc(resolve, reject);
        } catch (error) {
            reject(error);
        }

    }
    //Promise原型链上then方法
    then(onfulfilled, onrejected) {
        //分三种状态分类讨论
        //成功态
        if (this.status === CHENG) {
            onfulfilled(this.value);
        }
        //失败态
        if (this.status === SHI) {
            onrejected(this.reason);
        }
        //等待态
        if (this.status === DENG) {
            console.log('DENG');
        }

    }
}

module.exports = Promise;

---

使用02-异步定时器

const Promise = require('./P01.js');

const p = new Promise((resolve, reject) => {
    setTimeout(() => {
        if (Math.random() > 0.5) {
            resolve('>0.5');
        } else {
            reject('<=0.5');
        }
    }, 1000);
});


p.then((data) => {
    console.log('success01', data);
}, (err) => {
    console.log('fail01' + err);
});

p.then((data) => {
    console.log('success02', data);
}, (err) => {
    console.log('fail02' + err);
});

/*
    success01 >0.5
    success02 >0.5

*/

Promise源码02-异步定时器

const DENG = 'DENG';    //等待态
const CHENG = 'CHENG';  //成功态
const SHI = 'SHI';      //失败态
class Promise {
    constructor(myFunc) {
        console.log('myFunc');
        this.status = DENG;
        //成功的参数
        this.value = undefined;
        //失败的参数
        this.reason = undefined;
        //异步函数数组
        this.resolveCallbacks = [];
        this.rejectCallbacks = [];

        //失败回调函数
        let reject = (r) => {
            if (this.status === DENG) {
                this.status = SHI;
                this.reason = r;
                this.rejectCallbacks.forEach(fn => fn());
            }
        };
        //成功回调函数
        let resolve = (v) => {
            if (this.status === DENG) {
                this.status = CHENG;
                this.value = v;
                this.resolveCallbacks.forEach(fn => fn());
            }
        }
        //异常处理01
        try {
            myFunc(resolve, reject);
        } catch (error) {
            reject(error);
        }

    }
    //Promise原型链上then方法
    then(onfulfilled, onrejected) {
        //分三种状态分类讨论
        //成功态
        if (this.status === CHENG) {
            onfulfilled(this.value);
        }
        //失败态
        if (this.status === SHI) {
            onrejected(this.reason);
        }
        //等待态
        if (this.status === DENG) {
            //把成功回调保存起来，方便以后状态确定后调用
            this.resolveCallbacks.push(() => {
                onfulfilled(this.value);
            });
            //把失败回调保存起来，方便以后状态确定后调用
            this.rejectCallbacks.push(() => {
                onrejected(this.reason);
            });
        }

    }
}

module.exports = Promise;

---

使用03-链式调用

const fs = require('fs');

//封装Promise
function readFile(name, encoding) {
    return new Promise((resolve, reject) => {
        fs.readFile(name, encoding, function (err, data) {
            if (err) return reject(err);
            resolve(data);
        });
    });
}
/*
    ### 一个Promise实例可以连续打点调用then,链式调用    

    - 1.上一次then的return 是 Promise实例,该实例如果是成功态,走成功回调
    该实例如果是失败态,走失败回调
    - 2.上一次then的return 是 10|[]|undefined,走下一次then的成功回调
    - 3.上一次then抛异常会走下一次then的失败回调
    
 */
readFile('./c1.txt', 'utf-8').then((data) => {
    console.log('s1', data);
    //*****
    return readFile('./b.txt', 'utf-8');
    // return 30;
    // throw new Error('err');
    // return[1,3,5];
}, (err) => {
    console.log('r1', err);
    //--------连续调then
}).then((data) => {
    console.log('s2', data);
}, (err) => {
    console.log('r2', err);
    //--------连续调then
}).then((data) => {
    console.log('s3', data);
}, (err) => {
    console.log('r3', err);
});


//先打印
console.log(111);