vue await async 一个列表循环获取详情

需求：　　　　获取列表的同时获取每个列表的详情

1，获取到一个商品列表

2，但是商品列表里面没有商品详情信息

3，根据商品列表里的商品id循环列表，获取对应的列表内商品的详情

 

问题：　　　　循环获取详情的时候出现异步，导致没有及时的获取商品详情信息

 解决方法：　　async  await  异步变同步，

具体：　　　　

1>获取详情的方法
const getOrderInfoFn = (id) => {
        
        let p = new Promise((resolve,reject)=>{
            $http.get('请求的接口'+id,{},).then(res=>{
                    let datas = res.data.data
                    resolve(datas)
                })
        })
        return p
    }

// 详情使用promise 返回请求到的值

2>获取列表的方法
const getOrderListFn = async () => {
        
        let params = {
                page:state.page,
                limit:state.curPageLen,
            }
        await $http.get('请求的接口',params).then(async res=>{
                
                let curPageData = res.data.data.rows
                state.totalSize = res.data.data.total;
                
                                //异步转同步，调用同步数据合并方法（在下面）
                curPageData = await fdata(curPageData)                
                
                if(state.page ==1 ){
                    state.curPageData = []
                }
                state.curPageData =[...state.curPageData,...curPageData]
                state.page += 1
            }).catch(err=>{
                console.log(err)
                
            })
    }





3>同步数据合并方法
    const fdata = async (data) =>{

　　　　//map 出一个循环的promise数组，使用promise.all在继续后面
        const promises = data.map(async item => {
            const listItem = await getOrderInfoFn(item.id).then(infos=>infos)
            // const listItem = await {goods:[{goods_name:'ceshi'}]}
            return listItem;
        });

   　　// 使用promise.all 拿到所有的商品详情
        const listItems = await Promise.all(promises)
   　　// 将商品详情合并入商品的列表信息（promise.all  返回的信息是按照列表的顺序来的，所以可以使用下标进行匹配）
　　　　const nres = data.map((item,index)=>({
            ...item,
            ...listItems[index]
        }))
        return nres
    }