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循环里调用异步请求获取数据顺序混乱问题? - http://wlphp.com/?post=278

发表评论

电子邮件地址不会被公开。 必填项已用*标注