持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

有关于遍历和异步

写在前面: 记录一下在项目开发中经常碰到的两种数据的异步处理,总结一下关于这种循环的异步.

项目中经常遇到,在接口返回数据之后,要根据返回的数据再次发送请求,有的时候是对象格式,可以通过.then套.then的形式,可如果是数组类型的话,就要稍微麻烦一些,如以下两个场景:

1. 后端返回数组,前端异步处理该数组,等到收集完所有返回值,再进行下一步处理.(无序但异步)

2. 后端返回数组1,前端顺序遍历数据,根据每一项的某个值再处理得出数组2,要求跟数组1下标一一对应(顺序对应).(有序且异步)

第一种

解决方法: Promise.all()或者Promise.allSettled()

promise.all()的特性是只要返回的有一个是rejected,整个状态就是rejected,全都fulfilled,才能fulfilled.

Promise.allSettled()不管请求的状态成功与否,都会保存该请求的返回值,最后返回一个数组.

// 使用list1存储异步数据
  let list1 = await Promise.all(
    LevelList.map(item => {
      return await changeFunction(item.lgtd, item.lttd);
    }),
  );
// 如果changeFunction是网络请求,list1的顺序不一定和LevelList一致(无序).

第二种

解决方法: for of遍历

如果需要在遍历时,按规定顺序获取异步数据,直接forEach是不行的,因为forEach不能被打断,但for of语法可以.

// forEach
LevelList.forEach(item => {
    let res = await coordConver(item.lgtd,item.lttd);
    console.log(res)// 依然是无序的
})

// for of
(async () => {
    for (let item of LevelList) {
        let res = await coordConver(item.lgtd,item.lttd);
        console.log(res)// 按顺序执行
    }
})()

可以用简要代码测试一下

let  arr = [1000,2000,3000];

function waitme(item) {
    return new Promise((resolve, reject) => {
    setTimeout(() => {
    resolve(item+1)
    },1000)
    })
}

// forEach
arr.forEach(async(item) => {let res = await waitme(item); console.log(res)})

// for of
(async () => {
    for (let item of arr) {
        let res = await waitme(item);
        console.log(res);
    }
})()

End