处理多个Promise: .all() .race()

最新推荐文章于 2024-03-09 20:58:38 发布
最新推荐文章于 2024-03-09 20:58:38 发布
阅读量1.4k 收藏
点赞数 1
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/96575472
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>处理多个Promise</title>
</head>
<body>
    <script>
         /*
        Promise.all() 方法回傳一個 Promise 物件，當引數 iterable 中所有的 promises 都被實現（resolved）。
        或以第一個被拒絕的 promise 的原因被拒絕。
        */
        //reslove
        const usersPromise=new Promise((reslove,reject)=>{
            setTimeout(()=>{
                reslove(['Simba','PumbaaPig','NANA'])
            },2000);
        })

        const moviePromise=new Promise((reslove,reject)=>{
            setTimeout(()=>{
                reslove({name:'狮子王',rating:8.9,year:2019})
            },600)
        });

        Promise
        .all([usersPromise,moviePromise])
        .then(responses=>{
            const [users,movide]=responses;
            console.log(users);//(3) ["Simba", "PumbaaPig", "NANA"]
            console.log(movide);//{name: "狮子王", rating: 8.9, year: 2019}
        })


        //reject
        const usersPromise1=new Promise((reslove,reject)=>{
            setTimeout(()=>{
                reslove(['Simba','PumbaaPig','NANA'])
            },2000);
        })

        const moviePromise1=new Promise((reslove,reject)=>{
            setTimeout(()=>{
                reject(Error('NO movie'));
            },600)
           
        });
        Promise
        .all([usersPromise1,moviePromise1])
        .then(responses=>{
            const [users1,movide1]=responses;
            console.log(users1);//(3) ["Simba", "PumbaaPig", "NANA"]
            console.log(movide1);//NO movie
        })






        /*
        Promise.race(iterable) 方法返回一个 promise,一旦迭代器中的某个promise解决或拒绝，
        返回的 promise就会解决或拒绝。
        */

        //谁快就打印谁
        const usersPromise2=new Promise((reslove,reject)=>{
            setTimeout(()=>{
                reslove(['Simba','PumbaaPig','NANA'])
            },2000);
        })

        const moviePromise2=new Promise((reslove,reject)=>{
            setTimeout(()=>{
                reslove({name:'狮子王',rating:8.9,year:2019})
            },600)
        })

        Promise
        .race([usersPromise2,moviePromise2])
        .then(responses=>{
            console.log(responses);//{name: "狮子王", rating: 8.9, year: 2019}
        })
        .catch(err=>{
            console.error(err);
        })


        //有错误也是一样的，还是不能影响谁快就打印谁的定律
        const usersPromise3=new Promise((reslove,reject)=>{
            setTimeout(()=>{
                reject(Error('拒绝、错误'))
            },2000);
        })

        const moviePromise3=new Promise((reslove,reject)=>{
            setTimeout(()=>{
                reslove({name:'狮子王',rating:8.9,year:2019})
            },600)
        })

        Promise
        .race([usersPromise3,moviePromise3])
        .then(responses=>{
            console.log(responses);//{name: "狮子王", rating: 8.9, year: 2019}
        })
        .catch(err=>{
            console.error(err);
        })






    </script>
</body>
</html>

 

&XYZ&
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
多个 Promise（ECMAScript 6）
季秀的博客
06-17 1623
多个Promise 使用Node-redis操作 redis 时，redis 命令的执行结果在 nodejs 中都体现为回调。 redis.set('foo','bar') redis.get('foo',(err,reply) => { console.log(reply);//bar }) 用回调的形式得到命令执行的结果，对于单条命令还可以应对，当需要连续执行多条命令时，便会遇...
Promise的串行和并行
YZRHANYU的博客
10-17 1782
Promise使用以及 Promise的串行和并行
理解和使用Promise.all和Promise.race
01-08
理解和使用Promise.all和Promise.race 一、Pomise.all的演示 Promise.all可以将多个Promise实例包装成一个新的Promise实例。成功和失败的返回值是不一样的，成功的时候返回的是一个结果数组，失败的时候返回的是reject失败状态的值。 代码如下： let new1 = new Promise((resolve, reject) => { resolve('成功了') }) let new2 = new Promise((resolve, reject) => { re
掌握 Promise.all：优雅处理多个异步操作
你若盛开，清风自来
03-09 1656
Promise.all 是一个强大的 JavaScript 功能，用于同时处理多个异步操作并等待它们全部完成。本文将介绍 Promise.all 的使用方法、工作原理以及如何正确处理异常。Promise.all 接受一个Promise对象的数组作为参数，当且仅当数组中的所有Promise对象都 resolve 时，Promise.all 才会 resolve，否则第一个被 reject 的Promise会导致Promise.all 被 reject。
深入理解Promise.all
10-18
主要介绍了深入理解Promise.all，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Promise.all中对于reject的处理方法
10-18
主要介绍了Promise.all中对于reject的处理方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Java实现Promise.all()的示例代码
08-27
主要介绍了Java实现Promise.all()的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
promise.all 学习(多个promise对象回调)
weixin_45764245的博客
09-26 446
promise.all 学习 <script> /* promise.all 学习 1.Promise.all(数组的形式包含了多个Promise对象) 返回一个新的Promise 1.1如果:Promise.all中Promise对象全都是成功 返回值:新的Promise对象数组[] 1.2
promise.all同步执行多个任务
kaissgf的博客
03-05 343
const res = await Promise.all([getUserGroupOptions(), getUserFormDefined()]); const [userGroupOptions, userFormDefine] = res;
promise.all（）取多个数据
Belle_Chou的博客
09-25 4616
coherency state •shared: • at least 1 processor has the data cached &amp;amp; memory is upto-date • block can be read by any processor • exclusive: • 1 processor (the owner) has the data cached &amp;amp; memo...
多个promise顺序执行
m0_37346206的博客
09-15 3643
promise顺序执行
prottle:Promise.all（）节流阀
05-04
Promise.all（）节气门-Prottle 批量执行承诺兑现功能； 第1批次完成后，就该进行下一个了。 后端-支持节点4.0+； 前端-使用babel与env预设一起使用。 对IE使用Promise polyfill。 安装 $ npm install prottle -...
Promise Promise.all 的使用
03-02
1.解决图片上传是否成功 2.图片上传顺序 3.Primise.all 的使用练习 4.同队列类型的请求也可使用
promise(6)promise如何串联多个操作任务
qq_43952245的博客
12-01 1361
（1）、 promise的then()返回一个新的promise，可以看成then()的链式调用 （2）、通过then的链式调用串联多个同步/异步任务 注意：.then(）里面指定回调函数的执行发生的条件： 必须事先指定好对应的回调函数 对应状态发生改变 傻大个 ...
js高级进阶：promise同步编程技巧
07-11 1603
promise是ES6引进的异步编程解决方案，是一个构造函数，可以实例化对象，可以解决回调地狱的问题。打印结果：可以看到promise是一个对象 有自己的原型，有then，catch等方法promise的参数promise的参数是一个函数 这个函数有两个参数 分别是reject（失败的回调）和resolve（成功的回调）。
多个promise并发执行，如果某个promise失败，则尝试重新执行该promise一次，如果还是失败则提示错误
坚强的泡沫的博客
08-23 883
Promise.allSettled返回一个新的Promise对象，该对象在所有给定的Promise已被决议或拒绝后完成，并带有一个对象数组，注意：Promise.allSettled是ES2020中新增的方法，如果需要在较旧的环境中使用该方法，可以使用Promise.all和Promise.catch的组合来实现类似的功能。首先，将所有的promise放入数组中，并使用Promise.all()来同时执行这些promise，这样可以确保所有的promise都成功执行。
promise处理多个相互依赖的异步请求
学习记录
02-28 4693
在项目中，经常会遇到多个相互依赖的异步请求。如有a,b,c三个ajax请求，b需要依赖a返回的数据，c又需要a和b请求返回的数据。如果采用请求嵌套请求的方式自然是不可取的。导致代码难以维护，如何请求很多。会出现很多问题。 Promise就是解决多个异步请求的问题。Promise是ES6提供的一个对象，用来传递异步操作的消息。 Promise有三种状态：Pending（进行中）、Resolve...
多个Promise顺序执行的解决思路
SeaSunExpect的博客
02-23 2109
问题：多个延时器顺序执行，依次打印 function a() { setTimeout(() => { console.log(1) }, 200) } function b() { setTimeout(() => { console.log(2) }, 10) } function c() { setTimeout(() => { console.log(3) }, 30) } // a() // b() // c() // console.log(4)
Promise.all多个异步方法完成后
weixin_55799355的博客
12-05 957
Promise十分好用，当出现一个异步的请求或者方法，可以使用Promise 通过then或者catch执行接下来的代码。当然也可以用过async await的方式，，将异步转为同步的方式处理。 可当你遇到一个这样的需求：必须要等多个异步方法或者操作执行完成之后，执行下一步操作，该怎么办？ 比如多张图片的上传，如果用一个promise链（在一个promise.then里面再调用一个promise）这样非常麻烦，而且不科学。 Promise.all的使用场景就诞生了 展示一个promise.all()上传多张
Promise.all和Promise.race区别
最新发布
05-29
Promise.all和Promise.race都是Promise的静态方法，但它们有着不同的应用场景。 Promise.all方法接受一个包含多个Promise实例的数组作为参数，返回一个新的Promise实例。这个新的Promise实例在数组中所有的Promise实例都成功时才会被resolved，其中一个Promise实例失败则会被rejected。此外，Promise.all返回的Promise实例的resolved值是由所有Promise实例resolved值组成的数组。 而Promise.race方法同样接受一个包含多个Promise实例的数组作为参数，但返回的新的Promise实例在数组中有任意一个Promise实例率先被resolved或rejected时就会返回对应的结果，忽略其它Promise实例的状态。 简而言之，Promise.all方法适用于等待多个异步操作全部完成后再进行下一步操作的场景，而Promise.race方法则适用于只要有一个异步操作完成即可进行下一步操作的场景。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值