uni-app如何解決在for循環里調用異步請求獲取數據順序混亂問題？

總結/朱季謙

先前有一次做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();
        })
    }

按照這樣的修改，便可以避免for循環里調用異步請求出現的問題了。

 

其他js也可以按照這個思路，用遞歸算法的思想。