Ajax 异步 - 如何避免 function 在完成请求之前返回

Question

I have an array of string (id) and I need to iterate on it to make an ajax request to an api and push response in an array. The problem is that, because of asynchronous load, the return statement is made before the end of the call. Here an example:

getArrConcat: function (id) {
    var arr = new Array();
    var arrJoin = "";
    for (var i=0; i<id.length; i++){
        Model.load(id[i], {
            success: function (org) {
                arr.push(org.data);
            }
        });
    }
    arrJoin = arr.join('; ');
    return arrJoin;
}

Answer 1

You can't execute getArrConcat synchronously when the result depends on an ajax request.

The easiest solution would be to make getArrConcat returning a Promise and make the calling function async .

This would look more or less like:

getArrConcat: function (id) {
    return new Promise((resolve) => {
        for (var i=0; i<id.length; i++){
            Model.load(id[i], {
                success: function (org) {
                    var arr = new Array();
                    var arrJoin = "";
                    arr.push(org.data);
                    arrJoin = arr.join('; ');
                    resolve(arrJoin);
                }
            });
        }
    });
},

// call from an async method:
callGetArrConcat: async function() {
    const concatString = await this.getArrConcat(123);
    //Do something with concatString
}