博客
关于我
自定义实现Promise
阅读量:727 次
发布时间:2019-03-21

本文共 4233 字,大约阅读时间需要 14 分钟。

MyPromise是一个异步编程模型的核心抽象,它定义了Promise对象的创建、状态管理和操作方法。由于Promise在JavaScript中具有广泛的应用场景,本文将详细介绍自定义实现的MyPromise类及其相关方法。

MyPromise的定义

MyPromise类包含了Promise的三种状态:PENDING(初始状态)、FULFILLED(成功态)和REJECTED(失败态)。该类通过构造函数初始化 자신의状态、回调存储器以及默认值。构造函数接收一个执行器函数,该函数决定Promise的最终状态。

class MyPromise {    static PENDING = "pending";    static FULFILLED = "fulfilled";    static REJECTED = "rejected";    constructor(executor) {        this.status = MyPromise.PENDING;        this.callbacks = [];        this.value = undefined;        executor(this.resolve.bind(this), this.reject.bind(this));    }}

Promise的状态管理

当构造函数执行执行器函数时,会调用resolve或reject函数。通过 binds方法,将当前的this传入到这些函数中,以确保正确绑定上下文。

try {    executor(this.resolve.bind(this), this.reject.bind(this));} catch (error) {    this.reject(error);}

成功和失败处理

当resolve(成功处理)或reject(失败处理)方法被调用时,它们根据当前的状态进行操作。如果状态是PENDING,会更新为FULFILLED或REJECTED,并执行对应的回调。

resolve(value) {    if (this.status === MyPromise.PENDING) {        this.status = MyPromise.FULFILLED;        this.value = value;        setTimeout(() => {            this.callbacks.forEach(callback => {                callback.onResolve(value);            });        });    }}reject(reason) {    if (this.status === MyPromise.PENDING) {        this.status = MyPromise.REJECTED;        this.value = reason;        setTimeout(() => {            this.callbacks.forEach(callback => {                callback.onRejected(value);            });        });    }}

then方法的链式性质

then方法允许 promise 对结果进行进一步处理,支持链式调用。若用户未提供处理函数,则默认返回当前的value。

then(onResolve, onRejected) {    if (typeof onResolve !== "function") {        onResolve = () => this.value;    }    if (typeof onRejected !== "function") {        onRejected = () => this.value;    }    const promise = new MyPromise((resolve, reject) => {        if (this.status === MyPromise.FULFILLED) {            this.parse(promise, onResolve(this.value), resolve, reject);        } else if (this.status === MyPromise.REJECTED) {            this.parse(promise, onRejected(this.value), resolve, reject);        } else {            this.callbacks.push({                onResolve: value => this.parse(promise, onResolve(value), resolve, reject),                onRejected: value => this.parse(promise, onRejected(value), resolve, reject)            });        }    });    return promise;}

parse方法

parse方法用于异步地分割处理结果,避免多个回调同时执行。通过setTimeout确保等待之前的操作完成。

parse(promise, result, resolve, reject) {    setTimeout(() => {        if (promise === result) {            throw new TypeError("Chaining cycle detected");        }                try {            if (result instanceof MyPromise) {                result.then(resolve, reject);            } else {                resolve(result);            }        } catch (error) {            reject(error);        }    });}

Promise的静态方法

MyPromise提供了多种静态方法,如resolve和reject,可以用来将普通值或其他Promise对象转换为MyPromise实例。

static resolve(value) {    return new MyPromise((resolve, reject) => {        if (value instanceof MyPromise) {            value.then(resolve, reject);        } else {            resolve(value);        }    });}static reject(value) {    return new MyPromise((resolve, reject) => {        if (value instanceof MyPromise) {            value.then(resolve, reject);        } else {            reject(value);        }    });}

Promise的集合处理方法

MyPromise支持对多个Promise对象进行同时处理。all方法确保所有Promise执行完毕后再返回结果。

static all(promises) {    const values = [];        return new MyPromise((resolve, reject) => {        promises.forEach(promise => {            promise.then(                value => {                    values.push(value);                    if (values.length === promises.length) {                        resolve(values);                    }                },                reason => {                    reject(reason);                }            );        });    });}

Promise的竞赛处理方法

race方法返回一个Promise,为第一个完成的任务提供结果。

static race(promises) {    return new MyPromise((resolve, reject) => {        promises.forEach(promise => {            promise.then(                value => {                    resolve(value);                },                reason => {                    reject(reason);                }            );        });    });}

通过上述方法,MyPromise实现了基本的异步编程功能,可满足大多数Promise使用场景。

转载地址:http://rxsgz.baihongyu.com/

你可能感兴趣的文章
MySQL 数据库操作指南:学习如何使用 Python 进行增删改查操作
查看>>
MySQL 数据库的高可用性分析
查看>>
MySQL 数据库设计总结
查看>>
Mysql 数据库重置ID排序
查看>>
Mysql 数据类型一日期
查看>>
MySQL 数据类型和属性
查看>>
mysql 敲错命令 想取消怎么办?
查看>>
Mysql 整形列的字节与存储范围
查看>>
mysql 断电数据损坏,无法启动
查看>>
MySQL 日期时间类型的选择
查看>>
Mysql 时间操作(当天,昨天,7天,30天,半年,全年,季度)
查看>>
MySQL 是如何加锁的?
查看>>
MySQL 是怎样运行的 - InnoDB数据页结构
查看>>
mysql 更新子表_mysql 在update中实现子查询的方式
查看>>
MySQL 有什么优点?
查看>>
mysql 权限整理记录
查看>>
mysql 权限登录问题:ERROR 1045 (28000): Access denied for user ‘root‘@‘localhost‘ (using password: YES)
查看>>
MYSQL 查看最大连接数和修改最大连接数
查看>>
MySQL 查看有哪些表
查看>>
mysql 查看锁_阿里/美团/字节面试官必问的Mysql锁机制,你真的明白吗
查看>>