需求:用一个数组中的每个值去循环请求接口,获取对应数据放进新数组

举个栗子可能更好理解:老师想知道每个同学的成绩,然后有个接口是需要用同学的id去拿到对应的分数。

那么,已知数组是:

[1, 2, 3, 4] // 同学id数组

目标数组是:

{ id: 1, name: '张三', score: 98 }, { id: 2, name: '李四', score: 99 }, { id: 3, name: '王五', score: 99 }, { id: 4, name: '老六', score: 100 },

使用 asyncawait

methods: { async handleGoods(arr) { let idArr = [1, 2, 3, 4]; let scoreArr = []; for (let i = 0; i < idArr.length; i++) { let data = await this.getScore(i); scoreArr.push({ id: idArr[i], name: data.name, score: data.score, async getScore(id) { return await new Promise((resolve, reject) => { // 请求接口 getScore({ id: id, }).then(res => { resolve(res.data); }).catch(() => { reject({}); });

要在循环中使用asyncawait,可以使用for…of 或者 for 循环, while循环等,不能使用foreach,因为在 forEarch 里执行 await 会并行的。

相关资料:

# 有了for循环 为什么还要forEach?#

# forEach的介绍 #

今天跟朋友解决一个vue项目中的问题,大概意思是: 前端向后端发送接口请求请求成功之后,后端返回了一个数组数组中包含了上百条数据。而我们需要做得是将这上百条数据以每组20条的形式渲染到页面上。 我和朋友的解决办法是: 定义一个空数组,这个空数组里面的元素也是空数组,然后循环返回的包含了上百条数据数组,将前20条数据放进第一个为空数组的元素中,然后利用splice将原数组的前20条数据删除,跳出循环。以下为代码: getSell(){ topicList({需要传的数据}).then(
一般来说 我们for循环用后端接口数组需要返回数据填充,但是返回后 发现 数组中数据并没有接口返回数据, 本人在vue项目中就遇到了这个问题,比如 test(arr) { for (let i = 0; i < (arr.length - 1); i++) { let url = arr[i].dataUrl; if (url != null) { let data = this.getData(url); async saveToolClick() { this.loading = true; for (let i = 0; i < this.defaultTableToolData.length; i++) { this.addToolForm.toolName = this.defaultTab
项目过程中的问题总结之循环发送请求 循环发送请求,除非必要,否则最好还是不要这么干,尤其是前后端分离项目,应当尽量避免发送多条请求,其实大部分场景下都可以找到可替代的方案。 但不排除一定要这么干的时候,这个需求,可以使用Promise,利用递归思想实现链式发送、处理请求。 一个可以多选删除的列表,如果被删除项被一些Service用,要提示无法删除。 正常思路应该是:把待删除项的id...
for循环数组用同一接口传入不同 id 获取数据,改装数组实现需求。由于接口比较特殊,同时多次用不稳定,for循环接口会变成异步执行会报错,所以需要等待上一个请求完成再执行下一次请求,可以采用 for循环 + promise + async await 实现。使用定时器模拟请求: 打印结果:...