【Javascript】分享一个异步请求问题导致的bug以及解决方法(Array.map Array.foreach 中 async/await 写法无效)

Array.foreach、 Array.map 中的async/await写法会失效 ,可使用Promise+Array.map 或者P romise + for循环代替

if(res.code === 10000){
    res.data = res.data.map((item)=>{
        return Object.assign({},item,{
            is_end:Date.now() > item.end_time || item.status === 2?true:false
        })
    })
    
    // map不可用
    // res.data.map(async(item,index)=>{                    
    //     const obj = await this.getActivityDetail(item.activity_key)   //异步
    //     return Object.assign({},item,obj)
    // })
    
    

    // foreach不可用
    // res.data.forEach(async(item,index)=>{
    //     const obj = await this.getActivityDetail(item.activity_key)   //异步
    //     item = Object.assign({},item,obj)
    // })


    //-------------------------------------------------------------
    // Primise + map 可用
    // const data =  await Promise.all( res.data.map(async(item,index)=>{
    //         const obj = await this.getActivityDetail(item.activity_key)   //异步
    //         return Object.assign({},item,obj)
    //     })
    // )
    //--------------------------------------------------------------
    // Promise + for 可用
    const data = await new Promise((resolve)=>{
        for(var index in res.data){
            (async function(index,item,self){
                const result = await self.getActivityDetail(item.activity_key)  //异步
                res.data[index] = Object.assign({},item,result)
                if(parseInt(index) === res.data.length-1)
                {
                    resolve(res.data)
                }
                // console.log('---',self.activityList)
            })(index,res.data[index],this)
        }
    })
    console.log('end',data) //通过data的log,查看异步处理是否生效，之后可对data干你想干的事
    
    //比如....
    this.activityList = data
    
}

如果觉得我的文章对你有帮助,欢迎关注我的blog

【Javascript】分享一个异步请求问题导致的bug以及解决方法(Array.map Array.foreach 中 async/await 写法无效)

相关知识点