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

codeburst.io/javascript-…

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)
    this.activityList = data
    
}
复制代码

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

相关知识点

【Javascript】深入理解async/await的实现,Generator+Promise = Async/Await
【Javascript】深入理解this作用域问题以及new运算符对this作用域的影响
【Javascript】手写运算符new创建实例并实现js继承

转载于:https://juejin.im/post/5cb6927e6fb9a068aa4b9598