Promise分享

最新推荐文章于 2024-06-21 16:41:46 发布

只会写Bug的程序员

最新推荐文章于 2024-06-21 16:41:46 发布

阅读量230

点赞数 1

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_28992047/article/details/131727225

版权

手写promise之前需要知道

宏任务 & 微任务
我们都知道 Js 是单线程的，但是一些高耗时操作就带来了进程阻塞问题。为了解决这个问题，Js 有两种任务的执行模式：同步模式（Synchronous）和异步模式（Asynchronous）。

JS异步的实现靠的就是浏览器的多线程，当他遇到异步API时，就将这个任务交给对应的线程，当这个异步API满足回调条件时，对应的线程又通过事件触发线程将这个事件放入任务队列，然后主线程从任务队列取出事件继续执行。以浏览器为例，有以下几个常见的进程和线程：

在异步模式下，创建异步任务主要分为宏任务与微任务两种。ES6 规范中，宏任务（Macrotask）称为 Task，微任务（Microtask）称为 Jobs。宏任务是由宿主（浏览器、Node）发起的，而微任务由 JS 自身发起。
宏任务与微任务的几种创建方式 👇

宏任务（Macrotask）	微任务（Microtask）
setTimeout	requestAnimationFrame（有争议）
setInterval	MutationObserver（浏览器环境）
MessageChannel	Promise.[ then/catch/finally ]
I/O，事件队列	process.nextTick（Node环境）
setImmediate（Node环境）	queueMicrotask
script（整体代码块）

来道面试题：

async function async1 () {
    console.log('async1 start');
    await async2();
    console.log('async end')
}
async function async2 () {
    console.log('async2')
}
console.log('script start')
setTimeout(() => {
    console.log('serTimeout')
}, 0)
async1()
new Promise((function (resolve) {
    console.log('promise1')
    resolve()
})).then(function () {
    console.log('promise2')
}).then(function () {
    console.log('promise3')
}).then(function () {
    console.log('promise4')
})
console.log('script end')

queueMicrotask的用法

console.log('script start');
new Promise((resolve) => {
    console.log('pr start');
    resolve();
}).then(res => {
    console.log('pr then');
}) .then(res => {
    console.log('pr end');
})
queueMicrotask(() => {
    console.log('queueMicrotask');
})
console.log('script end');

什么是Promise A+规范
当别人问起来什么是Promise/A+规范，可能会觉得有点懵，你可能用过Promise，但很可能不了解什么是Promise规范。
其实Promise 规范有很多，如Promise/A，Promise/B，Promise/D 以及 Promise/A 的升级版 Promise/A+。ES6中采用了 Promise/A+ 规范。
Promise标准解读
1. 一个promise的当前状态只能是pending、fulfilled和rejected三种之一。状态改变只能是pending到fulfilled或者pending到rejected。状态改变不可逆。
2. promise的then方法接收两个可选参数，表示该promise状态改变时的回调(promise.then(onFulfilled, onRejected))。then方法返回一个promise，then 方法可以被同一个 promise 调用多次。
3. Promise/A+并未规范race、all、catch方法，这些是ES6自己规范的。

正式开始

确定一个异步方法

微任务（Microtask）
requestAnimationFrame（有争议）
MutationObserver（浏览器环境）
Promise.[ then/catch/finally ]
process.nextTick（Node环境）
queueMicrotask

在这里插入图片描述

其中不需要判断环境的，也就queueMicrotask了，但是queueMicrotask的兼容性不是很好，所以写一个兼容方法:

const asyncFn = function () {
    if (typeof queueMicrotask === 'function') {
        return queueMicrotask;
    }
    if (typeof process === 'object' && process !== null && typeof (process.nextTick) === 'function') {
        return process.nextTick;
    }
    if (typeof (setImmediate) === 'function') {
        return setImmediate
    }
    return setTimeout
}()

写一个基础的Promise

const pr = new Promise((resolve, reject) => {
    const number = Math.random();
    if (number > 0.5) {
        resolve(number);
    } else {
        reject(new Error(number));
    }
});

const STATUS_PADDING = Symbol('PADDING');
const STATUS_FULFILLED = Symbol('FULFILLED');
const STATUS_REJECTED = Symbol('REJECTED');

class MiniPromise {
    constructor(callback){
        try {        
            callback(this.onFulfilled.bind(this), this.onRejected.bind(this));
        } catch (error) {
            this.onRejected(error);
        }
    }
    value = null;
    status = STATUS_PADDING;
    
    onFulfilled(value) {
        this.status = STATUS_FULFILLED;
        this.value = value;
    }
    onRejected(error) {
        this.status = STATUS_REJECTED;
        this.value = error;
    }
}

实现then

pr.then(res => {
    console.log('success::', res);
}, err => {
    console.error('error:::', err);
});

// 调用then中的方法时，需要判断当前promise的状态
// 如果是padding状态，需要等待promise的状态更新为fulfilled/rejected时才能调用
// 所以需要保存一下callback，等更新后再调用这个方法。
then(resolve, reject) {
    // 平常使用的时候，一般只传递了第一个参数，没有传reject方法，所以给他们加上默认值
    resolve = typeof resolve === 'function' ? resolve : value => value;
    reject = typeof reject === 'function' ? reject : value => value;
    
    const newPromise = new MiniPromise(() => {});
    switch(this.status) {
        case STATUS_PADDING:
            this.resolveCallback = resolve;
            this.rejectCallback = reject;
            this.thenPromise = newPromise;
            break;
        case STATUS_FULFILLED:
            try {
                newPromise.onFulfilled(resolve(this.value));
            } catch(err) {
                this.status = STATUS_REJECTED;
                newPromise.onRejected(reject(err));
            }
            break;
        case STATUS_REJCETED:
            try {
                newPromise.onRejected(reject(this.value));
            } catch(err) {
                newPromise.onRejected(reject(err));
            }
            break;
    }
    return newPromise;
}

多个then调用

const pr2 = pr.then(res => {
    console.log('success:222:', res);
}, err => {
    console.error('error:222:', err);
});
const pr3 = pr.then(res => {
    console.log('success:333:', res);
}, err => {
    console.error('error:333:', err);
});

想想改咋改？

// 将this.rejectCallback改为数组就好了
 onFulfilled(value) {
    this.status = STATUS_FULFILLED;
    this.value = value;
    let index = 0;
    while(this.resolveCallback.length) {
        const item = this. resolveCallback.shift();
        try {
            const result = item(this.value);
            this.thenPromiseList[index]. onFulfilled(result);
        } catch(err) {
            console.log('xxx resolve:::::', err);
            this.thenPromiseList[index].onRejected(err);
        }
        index ++;
    }
}
onRejected(error) {
    this.status = STATUS_REJECTED;
    this.value = error;
    let index = 0;
    while(this.rejectCallback.length) {
        const item = this.rejectCallback.shift();
        try {
            const result = item(this.value);
            this.thenPromiseList[index].onRejected(result);
        } catch(err) {
            console.log('xxx resolve:::', err);
            this.thenPromiseList[index].onRejected(err);
        }
        index ++;
    }
}

then(resolve, reject) {
    // ......
    switch(this.status) {
        case STATUS_PADDING:
            this.resolveCallback = resolve;
            this.rejectCallback = reject;
            this.resolveCallback.push(resolve);
            this.rejectCallback.push(reject);
            this.thenPromiseList.push(newPromise)
            break;
        // .....
    }
}

实现错误catch

catch(onRejected) {
   if (typeof onRejected !== 'function') {
       onRejected = reason => reason;
   }
   const newPromise = new MiniPromise(() => {});
   switch(this.status) {
       case STATUS_REJECTED:
           newPromise.status = this.status;
           newPromise.value = onRejected(this.value);
           break;
       case STATUS_PADDING:
           this.rejectCallbackList.push(onRejected);
           this.thenPromiseList.push(newPromise);
           break;
   }
   return newPromise;
}

实现直接调用resolve和reject

// 一般来说，写在class中只有属性和方法.都可以被实例化的对象进行调用,比如：
class Animal {
    type = '动物'
    name = 'animal'
}
const dog = new Animal();
dog.type // 动物
dog.name // animal
// 假如想要在外部直接使用class内部的方法，或属性，比如这样：
class Person {
    name = "shen"
}
console.log(Person.name); // 这样会打印Person1【类的名称】，并取不到shen

// 这时就需要使用static关键字
class Person {
    static name = 'shen';
}
console.log(Person.name);    // 这样就可以得到 shen 了
// 静态的方法中也可以使用同一个类下的其他静态属性或方法
class Person2 {
    static hhha = "aaa"
    static sayHi() {
        console.log(this.hhha + ' hi~');
    }
}
Person2.sayHi() // aaa hi~
// 如果hhha 不是static的，那么sayHi会打印出 undefined hi~

// react中的getDerivedStateFromProps，也是一个静态方法

回归正题，想要实现直接调用resolve，和reject方法，也需要使用static关键字

// 先看看使用方法
const resPr = Promise.resolve(123);

class MiniPromise {
    // ...
    static resolve(value) {
        const newPr = new MiniPromise((resolve, reject) => {
            try {
                resolve(value);
            } catch(err) {
                reject(err);
            }
        })
        return newPr;
    }    
    static reject(value) {
        const newPr = new MiniPromise((resolve, reject) => {
            try {
                reject(value);
            } catch(err) {
                reject(err);
            }
        })
        return newPr;
    }
    // ...
}

整体看一下代码

class MiniPromise {
    constructor(callback) {
        try {
            callback(this.handleFulfilled.bind(this), this.handleRejected.bind(this));
        } catch(err) {
            this.handleRejected(err);
        }
    }
    status = STATUS_PADDING;
    value = undefined;
    rejectCallbackList = [];
    fulfillCallbackList = [];

    thenPromiseList = [];

    static resolve(value) {
        const newPromise = new MiniPromise((resolve, rejcet) => {
            try {
                console.log(value);
                resolve(value);
            } catch(err) {
                rejcet(err);
            }
        });
        return newPromise;
    }
    static reject(value) {
        const newPromise = new MiniPromise((resolve, reject) => {
            try {
                reject(value);
            } catch(err) {
                reject(err);
            }
        });
        return newPromise;
    }

    handleFulfilled(value) {
        this.status = STATUS_FULFILLED;
        this.value = value;
        console.log('resolve', value, this.fulfillCallbackList);
        let index = 0;
        while(this.fulfillCallbackList.length) {
            const item = this.fulfillCallbackList.shift();
            try {
                const result = item(this.value);
                if (result === this.thenPromiseList[index]) {
                    this.thenPromiseList[index].handleRejected(new TypeError('Chaining cycle detected for promise #<Promise>'));
                    continue
                };
                this.thenPromiseList[index].handleFulfilled(result);
            } catch(err) {
                console.log('xxx resolve:::::', err);
                this.thenPromiseList[index].handleRejected(err);
            }
            index ++;
        }
    }
    handleRejected(reason) {
        this.status = STATUS_REJECTED;
        this.value = reason;
        console.log('rejcet', reason);
        let index = 0
        while(this.rejectCallbackList.length) {
            const item = this.rejectCallbackList.shift();
            try {
                const result = item(this.value);
                if (result === this.thenPromiseList[index]) {
                    this.thenPromiseList[index].handleRejected(new TypeError('Chaining cycle detected for promise #<Promise>'))
                    continue
                };

                this.thenPromiseList[index].handleRejected(result);
            } catch(err) {
                this.thenPromiseList[index].handleRejected(err);
            }
            index ++;
        }
    }
    then(onFulfilled, onRejected) {
        onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
        onRejected = typeof onRejected === 'function' ? onRejected : reason => reason;
        const newPromise = new MiniPromise(() => {});
        switch(this.status) {
            case STATUS_FULFILLED:
                try {
                    newPromise.status = this.status;
                    newPromise.value = onFulfilled(this.value);
                } catch(err) {
                    console.log('errr', err);
                    newPromise.value = onRejected(err);
                }
                break;
            case STATUS_REJECTED:
                newPromise.status = this.status;
                try {
                    newPromise.value = onRejected(this.value);
                } catch(err) {
                    newPromise.value = onRejected(err);
                }
                break;
            case STATUS_PADDING:
                this.rejectCallbackList.push(onRejected);
                this.fulfillCallbackList.push(onFulfilled);
                this.thenPromiseList.push(newPromise);
                break;
        }
        return newPromise;
    }

    catch(onRejected) {
        if (typeof onRejected !== 'function') {
            onRejected = reason => reason;
        }
        const newPromise = new MiniPromise(() => {});
        switch(this.status) {
            case STATUS_REJECTED:
                newPromise.status = this.status;
                newPromise.value = onRejected(this.value);
                break;
            case STATUS_PADDING:
                this.rejectCallbackList.push(onRejected);
                this.thenPromiseList.push(newPromise);
                break;
        }
        return newPromise;
    }
}

只会写Bug的程序员

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Promise分享

JS异步的实现靠的就是浏览器的多线程，当他遇到异步API时，就将这个任务交给对应的线程，当这个异步API满足回调条件时，对应的线程又通过事件触发线程将这个事件放入任务队列，然后主线程从任务队列取出事件继续执行。以浏览器为例，有以下几个常见的进程和线程：在异步模式下，创建异步任务主要分为两种。ES6 规范中，宏任务（Macrotask）称为 Task，微任务（Microtask）称为 Jobs。宏任务是由宿主（浏览器、Node）发起的，而微任务由 JS 自身发起。宏任务与微任务的几种创建方式 👇。
复制链接

扫一扫