需求:用一个数组中的每个值去循环请求接口,获取对应数据放进新数组
举个栗子可能更好理解:老师想知道每个同学的成绩,然后有个接口是需要用同学的id去拿到对应的分数。
那么,已知数组是:
[1, 2, 3, 4]
目标数组是:
{ id: 1, name: '张三', score: 98 },
{ id: 2, name: '李四', score: 99 },
{ id: 3, name: '王五', score: 99 },
{ id: 4, name: '老六', score: 100 },
使用 async
,await
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({});
});
要在循环中使用async
、await
,可以使用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 实现。使用定时器模拟请求:
打印结果:...