js循环处理 async await

需求

因为最近的项目上有一个显示历史记录的需求,然后因为其中的创建人等都需要通过接口去获取具体的数据,这就造成了我需要循环遍历历史记录并同时处理其中的字段显示问题。

思路

我在网上看到的一些对于循环处理async await的方法是这样的

let list = [1,2,3,4,5,6]

function fun(item){
	//这里其实是调用接口,所以时间完全无法把握
    return item
}
async function go1(){
    list.forEach(async item=>{
    	// console.log(item)
        let item1 = await(fun(item))
        console.log(item1)
    })
}
go1()

js循环处理 async await_第1张图片
这里可以看到我们这个语句是按顺序执行了,但是,其实这里只有循环内部是同步了,外部就异步了,这里我们可以再加一句话看看

let list = [1,2,3,4,5,6]

function fun(item){
	//这里其实是调用接口,所以时间完全无法把握
    return item
}
async function go1(){
    list.forEach(async item=>{
    	// console.log(item)
        let item1 = await(fun(item))
        console.log(item1)
    })
    //加上这句话
    console.log('done')
}
go1()

js循环处理 async await_第2张图片
这里就发现后面的代码先执行了,其实这个对于整个执行方法来讲还是异步了,那么回到需求上来我们要整个执行过程是同步的应该怎么做呢

let list = [1,2,3,4,5,6]

function fun(item){
	//这里其实是调用接口,所以时间完全无法把握
    return item
}
async function go2(){
    for(let item of list){
        let item1 = await(fun(item))
        console.log(item1)
    }
    console.log('done')
}
go2()

js循环处理 async await_第3张图片
用回原来的老循环,其实也算是一个小坑吧,还是经验太少了

你可能感兴趣的:(大前端-javascript)