uni-app如何解决在for循环里调用异步请求获取数据顺序混乱问题?
情景是这样的,h5商城通过接口1获取到楼层,比如有4个,然后循环4个楼层,在循环里面获取里面的产品,然后把楼层以及下面产品重组后push到当前页面data里面,页面循环然后就能显示出来楼层以及产品了。但是结果发现返回的楼层结果是乱的,循环发送了4个异步请求,4个请求的返回结果顺序每次可能会不一样导致的顺序错乱。
const louceng_arr = [] result.data[0].dss_list.forEach(item => { const shop_special_id = item.shop_special_id //调用接口获取产品 Api.getSpecialGoodslist({ specialId: shop_special_id, token: uni.getStorageSync('token'), is_token: 0 }) .then(result1 => { const goodlist_arr = new Array() result1.rows.forEach(item1 => { goodlist_arr.push({ goods_id: item1.goods_id, goods_name: item1.goods_name, goods_image: item1.pc_img, goods_price_min: item1.member_integral }) }) app.items.push({ name: item.special_name, type: "goods", params: { "source": "auto", "banner":item.special_img, "auto": { "category": 0, "goodsSort": "all", "showNum": 6 } }, style: { "background": "#F6F6F6", "display": "list", "column": 2, "show": ["goodsName", "goodsPrice", "linePrice", "sellingPoint", "goodsSales" ] }, data: goodlist_arr }) }) })
在uni-app框架里,遇到这样的类似代码时,可以用递归算法来避免for循环结束了,异步请求还没有结束的问题,将上面的代码修改成递归形式,如下:
//把楼层赋值给一个简短的数组 const louceng_arr = result.data[0].dss_list var i = 0; getLouceng(); function getLouceng() { if (i >= louceng_arr.length) { return; } const shop_special_id = louceng_arr[i].shop_special_id //调用接口获取产品 Api.getSpecialGoodslist({ specialId: shop_special_id, token: uni.getStorageSync('token'), is_token: 0 }) .then(result1 => { const goodlist_arr = new Array() result1.rows.forEach(item1 => { goodlist_arr.push({ goods_id: item1.goods_id, goods_name: item1.goods_name, goods_image: item1.pc_img, goods_price_min: item1.member_integral }) }) app.items.push({ name: louceng_arr[i].special_name, type: "goods", params: { "source": "auto", "banner": louceng_arr[i].special_img, "auto": { "category": 0, "goodsSort": "all", "showNum": 6 } }, style: { "background": "#F6F6F6", "display": "list", "column": 2, "show": ["goodsName", "goodsPrice", "linePrice", "sellingPoint", "goodsSales" ] }, data: goodlist_arr }) i++ getLouceng(); }) }
问题得以解决!!!
版权声明:若无特殊注明,本文皆为《菜鸟站长》原创,转载请保留文章出处。
本文链接:uni-app如何解决在for循环里调用异步请求获取数据顺序混乱问题? - https://wlphp.com/?post=278