手写Promise的静态方法

1.手写请求超时方法

let request = ajax('./api');
let timeout = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        reject('timeout');
    },5000)
})

Promise.race([
    request,
    timeout
]).then((res)=>{
    console.log(res);
}).catch((err)=>{
    console.log(err);
})

2.实现一个Promise.all

Promise.myall = (arr) => {
    console.log('hello');
    let res = new Array(arr.length);
    let cnt = 0;// 成功的数量
    return new Promise((resolve,reject) => {
        arr.forEach((item,index) => {
            let i = index;
            Promise.resolve(item).then(value => {
                res[i] = value;
                cnt++;
                if(cnt === arr.length){
                    resolve(res);
                }
            }).catch(err => {
                reject(err);
            })
        })
    })
}

Promise.first

顾名思义就是返回第一个被resolve的promise,参数是一个promise数组,如果全都被reject的话就返回reject,Promise概念熟悉的话就非常简单:

Promise.first = function(list) {
    let count = 0

    return new Promise((resolve, reject) => {
        try {
            list.forEach(p => {
                p.then(resolve, () => {
                    ++count
                    count === list.length && reject(`all promises had been rejected`)
                })
            })
        } catch (e) {
            reject(e)
        }
    })
}

Promise.last

字面意思就是返回最后一个resolve掉的promise,同样也是接受一个promise数组,全被reject就返回reject信息,不过为了记录最后一个被resolve的结果,需要添加一个临时变量,代码相对first方法繁琐一点,then中两个函数都要判断:

Promise.last = function(list) {
    const len = list.length
    let result = null
    let count = 0

    return new Promise((resolve, reject) => {  
        try {
            for (let i = 0; i < len; ++i) {   
                list[i].then( data => {
                    count++
                    result = data
                    count === len ? resolve(result) : ''
                }, () => {
                    count++
                    count === len ? result === null ? reject(`all promises had been rejected`) : resolve(result): ''
                })
            }
        } catch (e) {
            reject(e)
        }
    })
}
### 实现 JavaScript 中的 Promise #### 创建基本结构 为了创建一个自定义 `Promise` 对象,首先需要构建其基础框架。该对象接收两个参数——`resolve` 和 `reject` 函数,在初始化时传入执行器函数作为参数。 ```javascript function MyPromise(executor) { let state = 'pending'; // 初始状态为 pending let value = null; let handlers = []; function resolve(newValue) { if (state === 'pending') { state = 'fulfilled'; value = newValue; handlers.forEach(handler => handler.onFulfilled(value)); } } function reject(reason) { if (state === 'pending') { state = 'rejected'; value = reason; handlers.forEach(handler => handler.onRejected(reason)); } } executor(resolve, reject); } ``` #### 添加 `.then()` 方法支持 为了让 `MyPromise` 支持链式调用,必须实现`.then(onFulfilled, onRejected)`方法。此方法允许注册回调处理程序,并返回一个新的 `MyPromise` 实例以便继续链条上的后续操作[^3]。 ```javascript MyPromise.prototype.then = function(onFulfilled, onRejected) { return new MyPromise((resolve, reject) => { handle({ onFulfilled, onRejected, resolve, reject }); }); function handle(handler) { if (state === 'pending') { handlers.push(handler); return; } const callback = state === 'fulfilled' ? handler.onFulfilled : handler.onRejected; try { const returnValue = callback(value); if (returnValue instanceof MyPromise) { returnValue.then(handler.resolve, handler.reject); } else { handler.resolve(returnValue); } } catch (error) { handler.reject(error); } } }; ``` #### 扩展静态方法 除了核心功能外,还可以扩展一些常用的辅助工具来简化开发工作流: - **`MyPromise.resolve(value)`**: 返回一个已经完成的成功态实例。 - **`MyPromise.reject(reason)`**: 返回一个失败态实例。 - **`MyPromise.all(iterable)`**: 接受可迭代对象并等待所有承诺都完成后才触发下一步动作。 - **`MyPromise.race(iterables)`**: 同样接受一组承诺列表,但是只要有一个完成了就会立即响应。 这些额外的方法可以通过继承原型或直接挂载到构造函数上来实现[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值