promise.all用法实例

最新推荐文章于 2024-06-18 08:00:00 发布
最新推荐文章于 2024-06-18 08:00:00 发布
阅读量898 收藏 2
点赞数
分类专栏： vue相关 经典用法 和 坑
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42606338/article/details/110918208
版权

场景描述：
step1: 请求list接口获取数据，item中有一个url属性，值为string
step2: 请求url的链接获取页面渲染所需的json数据
由于需要循环调用与then中重新组装数据，因此入坑(无法在调用的then中获取到数据)

问题写法(简写)：
.vue中
在这里插入图片描述
store.js中
在这里插入图片描述
以上问题写法 sore.js中返回的backList为空，vue中then方法获取的res数据为空，原因即为异步问题

使用promise.all的正确写法
vue中不变
store.js中修改如下：
在这里插入图片描述
根据promise.all的参数知道需传入的也是promise,故map一下数组中的url及对应的请求生成一个新的数组，传入到promise.all中,执行后获取的all即为数据所有url请求的返回值，再对返回值做重新解析，至此完成调用，正常获取返回值

东方孤独
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Promise Promise.all 的使用
03-02
1.解决图片上传是否成功 2.图片上传顺序 3.Primise.all 的使用练习 4.同队列类型的请求也可使用
Promise.all()使用实例
weixin_30552811的博客
05-05 381
一、什么是Promise.all()？ 　　在说这个之前要先说清楚promise。promise就是一个对象，专门用来处理异步操作的。 而Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。 二、Promise.all()有什么用？ 　　现在有一个需求，要你用node写个上传多张壁纸的接口，这时候就可以用Promise.all()了。 因为你...
Promise.all() 使用方法
最新发布
ZXH0122的博客
06-18 1328
Promise.all() 方法是 JavaScript 中的一个 Promise 方法，它用于同时处理多个 Promise 对象，并返回一个新的 Promise 对象。
promise.all使用的案例
weixin_45234939的博客
11-24 214
saveDetail () { const infoForm = this.$refs['merchantInfoForm'].validate(); const settleVal = this.$refs['settleForm'].validate(); Promise.all([infoForm, settleVal]).then(res => { if (res.every(item => it
Promise.all()的实例
qq_42750608的博客
09-04 292
console.log('here we go') Promise.all([1,2,3]) .then(all=>{ console.log('1: ',all) return Promise.all([()=>{ console.log('xxoo') },'xxoo',false]) }) .then(all=>{ console.log('2: ',all) let p1 = new Promise(resolve=>.
Promise.all 实践案例
鸡汤、好腻
12-31 599
应用场景：A接口依赖B,C,D....多接口返回的数据----，以下是用Promise.all处理，当然也可以用async/await处理， 如用async/await处理，请狠--戳我 mounted(){ this.getNumberAll() }, methods:{ getNumber1() { return new Promise((resolve, rejec...
Java实现Promise.all()的示例代码
08-27
在这个示例代码中，Promise.all()方法使用了CountDownLatch和ThreadPoolExecutor来实现并发执行异步请求。下面是Promise.all()方法的实现思路： 1. 创建一个List来存储异步请求的结果 2. 使用CountDownLatch对象...
利用ES6的Promise.all实现至少请求多长时间的实例
08-29
为了解决这个问题，我们可以使用Promise.all来实现至少请求多长时间的实例。我们可以创建两个promise对象，一个是ajax请求的promise对象，另一个是等待一定时间的promise对象。然后，我们使用Promise.all将这两个...
深入理解Promise.all
12-09
Promise.all 是 JavaScript 中处理异步操作的一种关键方法，它接收一个 Promise 对象的数组作为参数，并在所有 Promise 对象都解决（resolve）后返回一个新的 Promise 实例。这个返回的 Promise 实例只有在所有输入...
js代码-手写promise.all
07-16
`Promise.all`是Promise的一个方法，用于处理多个Promise实例，并在所有实例都解析（resolve）后返回一个新的Promise。这个新的Promise在所有输入Promise都成功时解析，只要有一个失败就会立即拒绝。下面我们将深入...
js代码-面试题2:使用promise.all 进行5个请求，若其中一个失败了，怎么让其他4个成功返回
07-14
在JavaScript中，Promise.all()方法用于处理多个Promise对象，它会返回一个新的Promise实例，这个实例在所有提供的Promise实例都解析（resolve）时解析，如果其中任何一个Promise实例被拒绝（reject），那么新的...
详细分析Js中的Promise.all基本知识（附Demo）
码农研究僧的博客
03-19 3628
Promise.all 是 JavaScript 中的一个方法，它接受一个由 Promise 对象组成的数组作为参数，并在所有 Promise 对象都变为 resolved（已完成）状态时才返回一个新的 Promise 对象，这个新的 Promise 对象的状态也变为 resolved，其值是一个包含了所有 Promise 对象结果的数组
Promise例子
liuzijiang1123的专栏
05-18 1576
前言：我看过沙漠下暴雨，看过大海亲吻鲨鱼，看过黄昏追逐黎明，没看过"你"；网上对于Promise的解释的文章很多，不过茫茫“文”海中，要找一个讲得好的，太难，而且还要找到一个自己这种水平能看懂的例子，更难，所以需要多方查证，然后自己总结一个适合自己能力水平看得懂的文章才行。（领悟出一个道理：打铁还需自身硬） （好文章还是很多，但是我这边是带着完成一个功能的目的去学习知识的） h
promise.all的使用
weixin_50070859的博客
05-31 2691
理解和使用Promise.all和Promise.race promise.all的使用 说明 Promise.all 可以将多个Promise实例包装成一个新的Promise实例，等待所有都完成（或第一个失败） 返回值 成功的时候返回的是一个数组，失败的时候则返回先被reject失败状态的值 实例代码如下 let p1 = new Promise((resolve, reject) => { resolve('成功了') }) let p2 = new Promise((resolve,
Promise.all的使用
weixin_44292923的博客
03-10 328
在多处调用Promise函数的时候,可以使用Promise 我应用的场景是当全部数据都加载之后才熏染出数据 wx.showLoading() 是小程序加载的图标 wx.hideLoading() 是小程序结束加载图标 三个请求的时候很难把握时候结束加载 const bid = options.bid const detail = bookModel.getDetail(bid); ...
Promise.all妙用
weixin_59017683的博客
08-10 257
promise
Promise.all的作用以及使用
m0_68956554的博客
08-16 227
Promise.all的作用以及使用
promise.all()使用
weixin_42978193的博客
06-14 5241
promise.all()用法
Promise.all 方法详解
热门推荐
潮汐未见潮落的博客
06-20 8万+
promise.all 的详细讲解，并包括 promise.all 手写代码
promise.all 实例
08-22
当使用Promise.all方法时，我们可以将多个Promise对象作为参数传递给它，然后它将返回一个新的Promise对象。这个新的Promise对象将在所有传入的Promise对象都被解决（resolved）后被解决，并返回一个包含所有解决结果的数组。 下面是一个使用Promise.all的实例： ```javascript const promise1 = new Promise((resolve, reject) => { setTimeout(() => { resolve("Promise 1 resolved"); }, 2000); }); const promise2 = new Promise((resolve, reject) => { setTimeout(() => { resolve("Promise 2 resolved"); }, 3000); }); const promise3 = new Promise((resolve, reject) => { setTimeout(() => { resolve("Promise 3 resolved"); }, 1000); }); Promise.all([promise1, promise2, promise3]) .then((results) => { console.log(results); }) .catch((error) => { console.log(error); }); ``` 在上面的代码中，我们创建了三个Promise对象，每个对象都使用setTimeout模拟异步操作。使用Promise.all将这三个Promise对象作为参数传递给它，然后通过.then方法处理解决结果。 在所有的Promise对象都被解决后，结果将作为一个数组传递给.then回调函数，打印出结果：["Promise 1 resolved", "Promise 2 resolved", "Promise 3 resolved"]。 如果其中一个Promise对象被拒绝（rejected），则会立即进入.catch回调函数，并打印出拒绝的原因。这是Promise.all的一个特性，如果任何一个Promise对象被拒绝，整个Promise.all就会被拒绝。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值