uniapp如何解决在for循环里调用异步请求获取数据顺序混乱问题？

Z时代
2024-01-10
分类：综合

coding

总结/朱季谦

先前有一次做uni-app的js接口对接时，遇到过这样的情况，在for循环里，调用一个异步请求时，返回来的值顺序是乱的，因此，在以下的代码里，push到数组里的值，每次的顺序可能都是不一样的，造成这样一个原因，是for循环是单线程的，异步请求是多线程的，f往往在for循环结束了，异步请求还没有结束。

that.list = res.datas.class_list;
for(var i=0;i<that.list.length;i++){

   that.list[i].tlist = []

var url = "w=goods_class&gc_id=" + that.list[i].gc_id.substring(2);
    that.thtxb_ajax_request(url, {}).then((res) => {
        that.tlist.push(res.datas.class_list)
        })    }

在uni-app框架里，遇到这样的类似代码时，可以用递归算法来避免for循环结束了，异步请求还没有结束的问题，将上面的代码修改成递归形式，如下：

that.list = res.datas.class_list;
var i = 0;
    getImg();
function getImg() {
if (i >= that.list.length) {
return;
    }
    that.list[i].tlist = []
var url = "w=goods_class&gc_id=" + that.list[i].gc_id.substring(2);
    that.thtxb_ajax_request(url, {}).then((res) => {
        that.tlist.push(res.datas.class_list)
        i++
        getImg();
        })    }