【Javascript】分享一個異步請求問題致使的bug以及解決方法(Array.map Array.foreach 中 async/await 寫法無效)

codeburst.io/javascript-…javascript

Array.foreach、 Array.map 中的async/await寫法 會失效 ,可以使用Promise+Array.map 或者P romise + for循環代替java

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
    
}
複製代碼

若是以爲個人文章對你有幫助,歡迎關注個人bloggit

相關知識點

【Javascript】深刻理解async/await的實現,Generator+Promise = Async/Await
【Javascript】深刻理解this做用域問題以及new運算符對this做用域的影響
【Javascript】手寫運算符new建立實例並實現js繼承github

相關文章
相關標籤/搜索