Promise.all,Promise.race手撕代码

本文探讨了JavaScript中的Promise.race函数,它允许并发处理多个承诺,并在任一完成时立即返回结果。同时,Promise.all展示了如何等待所有承诺完成。通过实例解析,理解它们在异步编程中的不同应用场景与优势。
//promise.race
function prorace(promise){
        return new Promise((resolve,reject)=>{
            for(let i=0;i<promise.length;i++){
                Promise.resolve(promise[i]).then(val=>{
                    resolve(val)
                }).catch(err=>{
                    reject(err)
                })
            }
        })
    }
// promise.all
    function proall(promise) {
        let res=new Array(promise.length),index=0
        return new Promise((resolve,reject)=>{
            promise.forEach((element,i) => {
                Promise.resolve(element).then(val=>{
                    index++
                    res[i]=element
                    if(index===promise.length){
                        resolve(res)
                    }
                },err =>{
                    reject(err)
                })
            });
        })   
    }
### Promise.allPromise.race 的区别与使用场景 #### 1. **Promise.all 的用法** `Promise.all` 方法用于将多个 Promise 实例包装成一个新的 Promise 实例。它会在所有传入的 Promise 都成功完成后才返回一个包含所有结果的数组[^3]。如果其中任何一个 Promise 被拒绝(rejected),则 `Promise.all` 会立即返回被拒绝的值,并忽略其他 Promise 的执行结果。 ```javascript let p1 = Promise.resolve('成功了'); let p2 = Promise.resolve('success'); Promise.all([p1, p2]).then((result) => { console.log(result); // 输出: ['成功了', 'success'] }).catch((error) => { console.log(error); }); ``` 如果其中一个 Promise 被拒绝,则 `Promise.all` 会直接进入 `catch` 分支,并输出第一个被拒绝的错误信息[^3]。 ```javascript let p1 = Promise.resolve('成功了'); let p2 = Promise.reject('失败'); Promise.all([p1, p2]).then((result) => { console.log(result); }).catch((error) => { console.log(error); // 输出: '失败' }); ``` #### 2. **Promise.race 的用法** `Promise.race` 方法同样接受一个 Promise 实例的数组作为参数,但它会返回第一个完成的 Promise 的结果,无论这个结果是成功还是失败[^2]。一旦有一个 Promise 完成,其余的 Promise 将被忽略。 ```javascript let p1 = new Promise((resolve, reject) => setTimeout(resolve, 500, 'A')); let p2 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'B')); Promise.race([p1, p2]).then((result) => { console.log(result); // 输出: 'B',因为 p2 更快完成 }).catch((error) => { console.log(error); }); ``` 如果第一个完成的 Promise 是被拒绝的,则 `Promise.race` 会直接进入 `catch` 分支[^2]。 ```javascript let p1 = Promise.reject('Error'); let p2 = Promise.resolve('Success'); Promise.race([p1, p2]).then((result) => { console.log(result); }).catch((error) => { console.log(error); // 输出: 'Error',因为 p1 更快完成 }); ``` #### 3. **Promise.allPromise.race 的区别** - **执行方式**: - `Promise.all` 等待所有 Promise 都完成,才会进入 `then` 分支[^3]。 - `Promise.race` 只需要一个 Promise 完成就会触发回调,无需等待其他 Promise[^2]。 - **返回结果**: - `Promise.all` 返回一个包含所有 Promise 结果的数组[^3]。 - `Promise.race` 返回第一个完成的 Promise 的结果,无论是成功还是失败[^2]。 - **错误处理**: - 在 `Promise.all` 中,只要有一个 Promise 被拒绝,整个操作就会失败并进入 `catch` 分支。 - 在 `Promise.race` 中,第一个完成的 Promise 决定了最终的结果,无论它是成功还是失败[^2]。 #### 4. **使用场景** - **Promise.all 的使用场景**: - 当需要同时发起多个异步请求,并且只有在所有请求都成功完成后才能继续下一步操作时,可以使用 `Promise.all`[^3]。 - 例如:从多个 API 获取数据后进行汇总分析。 - **Promise.race 的使用场景**: - 当需要从多个来源获取相同的数据,并选择最快返回的那个时,可以使用 `Promise.race`[^2]。 - 例如:向多个镜像服务器发送请求,哪个服务器先响应就使用哪个结果。 ### 示例代码 ```javascript // 使用 Promise.all let api1 = fetch('https://api.example.com/data1'); let api2 = fetch('https://api.example.com/data2'); Promise.all([api1, api2]).then((responses) => { return Promise.all(responses.map(response => response.json())); }).then((data) => { console.log(data); // 处理两个 API 的数据 }).catch((error) => { console.error(error); }); // 使用 Promise.race let fastApi1 = fetch('https://fast-api1.example.com/data'); let fastApi2 = fetch('https://fast-api2.example.com/data'); Promise.race([fastApi1, fastApi2]).then((response) => { return response.json(); }).then((data) => { console.log(data); // 使用最快返回的 API 数据 }).catch((error) => { console.error(error); }); ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值