Promise.all() 与 Promise.race()

最新推荐文章于 2025-04-29 17:19:56 发布
最新推荐文章于 2025-04-29 17:19:56 发布
阅读量199 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/heima201907/article/details/106375758
版权
Promise.all():

复制代码
1 <body>
2   <div id="pic" ></div>
3   <script>
4     const imgs = [
5         'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588606301799&di=26e46595e4a886700fb38dd008909934&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201710%2F07%2F20171007134945_84Cnd.jpeg',
6         'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1426668281,3085506529&fm=26&gp=0.jpg',
7         'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588606301800&di=28eb474abf2022fb1f4f7e1525882fa3&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F7LsWdDW5_xN3otqbppnN2DJv%2Fzhidao%2Fpic%2Fitem%2Fdcc451da81cb39db719c5aa3db160924aa1830e2.jpg'
8       ];
9
10
11       function loadImagePro(picUrl) {
12         return new Promise(function (resolve, reject) {
13           const img = new Image();
14           img.src = picUrl;
15           img.onload = () => void resolve(img); // 将标签元素传入resolve
16           // img.onerror = reject('加载失败');
17         });
18       }
19     /*
20       // 返回一个Promise实例组成的数组
21       const promiseArr = imgs.map(picUrl => loadImagePro(picUrl));
22
23       Promise.all(promiseArr)
24       .then(function (picArr) {
25         console.log(picArr);   // 返回所有标签元素组成的数组
26         picArr.forEach(function (item) {  
27           console.log(item);
28           document.getElementById('pic').appendChild(item);
29         });
30       });
31     */
32
33     // ES6 写法
34     Promise.all(imgs.map(picUrl => loadImagePro(picUrl)))
35     .then(picArr => {
36       picArr.forEach(item => document.getElementById('pic').appendChild(item));
37     });
38     console.log('末尾');
39   </script>
40 </body>
复制代码


Promise.race():

复制代码
1 <body>
2   <div id="pic" ></div>
3   <script>
4     const imgs = [
5         'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588606301799&di=26e46595e4a886700fb38dd008909934&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201710%2F07%2F20171007134945_84Cnd.jpeg',
6         'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1426668281,3085506529&fm=26&gp=0.jpg',
7         'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588606301800&di=28eb474abf2022fb1f4f7e1525882fa3&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F7LsWdDW5_xN3otqbppnN2DJv%2Fzhidao%2Fpic%2Fitem%2Fdcc451da81cb39db719c5aa3db160924aa1830e2.jpg'
8       ];
9
10
11     function loadImagePro(picUrl) {
12       return new Promise(function (resolve, reject) {
13         const img = new Image();
14         img.src = picUrl;
15         img.onload = () => void resolve(img); // 将标签元素传入resolve
16         // img.onerror = reject('加载失败');
17       });
18     }
19
20     // 返回一个Promise实例组成的数组
21     const promiseArr = imgs.map(picUrl => loadImagePro(picUrl));
22
23     // 只接收promiseArr数组中，最先返回的promise实列，然后执行这个实例的.then()
24     // Promise.race(promiseArr).then(function (item) {// 接收到Promise.race返回的标签元素
25     //   document.getElementById('pic').appendChild(item);
26     // });
27     
28     // ES6 写法
29     Promise.race(imgs.map(picUrl => loadImagePro(picUrl))).then(item => document.getElementById('pic').appendChild(item));
30
31     console.log('末尾');
32   </script>
复制代码
Promise.all()
代码青春
08-25 530
 
Promise.all和Promise.race的区别和使用
热门推荐
周家大小姐
06-07 1万+
目录 promise.all() promise.race() 使用场景: promise.all() 比如当数组里的P1，P2都执行完成时，页面才显示。 值得注意的是，返回的数组结果顺序不会改变，即使P2的返回要比P1的返回快，顺序依然是P1，P2 Promise.all成功返回成功数组, 失败返回失败数据,一但失败就不会继续往下走 let p1 = Promise.resolve('aaa') ...
实现Promise.all
weixin_54165147的博客
01-29 1159
我们还定义了一个空数组results来存储每个Promise对象的解决值，并定义了一个count变量来跟踪已成功解决的Promise对象的数量。Promise.all是一个静态方法，它接受一个可迭代的对象（比如数组）作为参数，并返回一个新的Promise对象。这个新的Promise对象将在可迭代对象中的所有Promise对象都成功解决后解决，并将解决值组成一个数组作为其解决值。如果其中一个Promise对象被拒绝了，我们将直接调用reject函数将错误传递给新的Promise对象，使它被拒绝。
js 深入理解 Promise.all 和 Promise.allSettled 特性和区别
weixin_49232311的博客
04-29 919
无论是 Promise.all 还是 Promise.allSettled，它们的返回值都会严格按照传入的 Promise 顺序返回结果，无论这些 Promise 的实际完成顺序如何。new Promise((resolve, reject) => setTimeout(() => reject('Error'), 500)), // 第2个。new Promise(resolve => setTimeout(() => resolve(3), 200)), // 第3个。
promise.all使用
Mr_Renhappy的博客
05-16 189
处理一组promise的异步请求，通过每张图片的前缀url,依次异步请求获取图片自己的base64码然后渲染图片 //index.vue //template <li class="policy-img" v-for="(it,index) in imageInfos"> <img :src="it.imgUrl" alt/> <i @click="imageInfos.splice(index,1)">×</
Promise.all
liikobe的博客
06-13 379
Promise.all([this.getData()]).finally(()=&gt;{})//调用接口this.getData(){return new Promise(resolve=&gt;{//请求接口getMyData({}).then(response=&gt;{},err=&gt;{}).finally(resolve)})}
理解和使用Promise.all和Promise.race
01-08
理解和使用Promise.all和Promise.race 一、Pomise.all的演示 Promise.all可以将多个Promise实例包装成一个新的Promise实例。成功和失败的返回值是不一样的，成功的时候返回的是一个结果数组，失败的时候返回的是...
拒绝死记硬背！清晰思路讲透 控制并发数、Promise.all、Promise.race 的实现逻辑
weixin_53893220的博客
10-01 922
近期求职季刷到非常多关于手写代码题，在研究 `Promise` 的相关特性过程中，发现其实背后涉及的原理是一样的。因此为了帮助大家更好地理解 `Promise.all`、`Promise.race`、**控制 Promise 请求并发数** 等等的题目，特地写下这篇文章~
js代码-面试题2:使用promise.all 进行5个请求，若其中一个失败了，怎么让其他4个成功返回
07-14
2. **使用Promise.race()**：虽然Promise.all()在任何Promise失败时都会立即终止，但我们可以结合使用Promise.race()来监控失败的请求。Promise.race()会返回最先完成（无论是解析还是拒绝）的Promise的结果。我们...
promise.all
wu_xiao_qing的博客
03-05 245
const expired_result_new = yield Promise.all(expired_result.map( async (key)=&gt;{ let customer = await request.customerById(key.customer_id); return { api_id:key.api_id, ...
Promise之all
Egret_or_Unity的博客
03-29 1023
一，Promise.all(iterable)查看报道方法一个解析参数中的所有承诺  都已解析或者迭代参数不所有游戏承诺  的单个解析器。它拒绝了拒绝的第一个承诺的原因。Promiseiterablevar promise1 = Promise.resolve（1）; var promise2 = 2; var promise3 = new Promise（function（resolve，r...
promise.all()
turbman的博客
01-10 480
promise对象和jq结合处理ajax多个异步任务 Promise.all([//all 接收一个数组 $.ajax({url:'data/arr.txt',dataType:'json'}), $.ajax({url:'data/num.txt',dataType:'json'}), //... ]).
promise.all和promise.race
最新发布
06-10
### Promise.all 和 Promise.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.all 和 Promise.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); }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值