手动封装promise功能,class封装实现

42 篇文章 0 订阅
10 篇文章 0 订阅

手动封装promise功能,class封装实现

promise基本功能点

  1. 创建对象的时候,传入一个回调,并且能够接收成功、失败状态设置两个参数
  2. 能够通过then方法调用,根据状态调用成功或者失败回调,then后面还可以连续使用then,因此then方法需要返回与当前状态一致的promise

实现promise基本功能

class MyPromise = {
	// 构造函数
	constructor(executor) {
	// 定义状态和初始值
        this.state = 'pending'
        this.value = undefined
        // 回调队列
        this.handlers = []
        // 设置成功状态
        const resolve = (value) => {
            if (this.state === 'pending') {
                this.state = 'fulfilled';
                this.value = value;
                this.handlers.forEach(handler => this.executeHandler(handler));
                this.handlers = [];
            }
        }
        // 设置失败状态
        const reject = (reason) => {
            if (this.state === 'pending') {
                this.state = 'rejected';
                this.value = reason;
                this.handlers.forEach(handler => this.executeHandler(handler));
                this.handlers = [];
            }
        };
        try {
            // 将回调传出去给参数给回调使用来设置状态
            executor(resolve, reject);
        } catch (error) {
            reject(error);
        }
    }
	// 回调执行
	executeHandler(handler) {
        // 统一处理回调
        const { onFulfilled, onRejected, resolve, reject } = handler;

        if (this.state === 'fulfilled') {
            // 成功状态执行
            if (typeof onFulfilled === 'function') {
                try {
                    // 成功执行,成功状态
                    const result = onFulfilled(this.value);
                    resolve(result);
                } catch (error) {
                    // 失败执行
                    reject(error);
                }
            } else {
                resolve(this.value);
            }
        } else if (this.state === 'rejected') {
            if (typeof onRejected === 'function') {
                try {
                    // 成功执行,失败状态
                    const result = onRejected(this.value);
                    resolve(result);
                } catch (error) {
                    // 失败执行
                    reject(error);
                }
            } else {
                // 失败执行
                reject(this.value);
            }
        }
    }
    // then方法
    then(onFulfilled, onRejected) {
        // then需要返回promise对象
        return new MyPromise((resolve, reject) => {
            // resolve和reject成功用来设置这个新返回的promise状态和当前的一致
            const handler = {
                onFulfilled,
                onRejected,
                resolve,
                reject
            };

            if (this.state === 'pending') {
                // 如果是pending,添加回调进队列
                this.handlers.push(handler);
            } else {
                this.executeHandler(handler);
            }
        });
    }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue2中,使用axios封装Promise.all的步骤如下: 首先,可以封装一个Promise函数,该函数接受三个参数jsonData、config和index,通过返回一个新的Promise对象,可以用来处理上传请求。在该Promise对象中,使用axios进行上传请求,并通过then方法处理请求成功的情况,如果返回码为0,则将返回的数据传递到下一个Promise中。如果请求失败,则使用catch方法将错误信息和配置项传递给下一个Promise。 第二步,使用async和await再次封装Promise函数,并返回该Promise的值。通过在该函数中调用上一步封装Promise函数,并使用await关键字等待该Promise的结果,然后返回结果。 第四步,使用Promise.all获取所有方法正常执行后的结果集。在该步骤中,可以将封装好的Promise函数放入一个数组中,然后使用Promise.all方法来执行这些Promise函数,并使用then方法处理正常执行后的结果集。如果有任何一个Promise函数出现异常,则使用catch方法来处理异常情况。 综上所述,以上是使用axios封装Promise.all的步骤。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue中循环遍历axios问题,使用promise.all解决,promise.all异常解决](https://blog.csdn.net/Uookic/article/details/118409301)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值