如何在完整执行内部 AJAX 时调用 function？

Question

I have AJAX code as mentioned below:

$("#id").click(function(e){
e.preventDefault();
$.ajax({
    url: 'url1',    
    type: 'get',
    data: {
        method: 'method1',
        param: id
    },
    datatype: 'json',
    success: function(p){
        let arr = [];
        const obj = JSON.parse(p);
        if (obj.RETVAL == true) {
            var i;
            for(i=0; i< 6 ; i++){
                $.ajax({
                    url: 'url2',    
                    type: 'post',
                    data: {
                        method: 'method2',
                        param: id2
                        },
                    success: function(r){
                        if (r>1) {
                        }
                        else{
                            arr.push(r);  //this array will be passed in fun1
                        }
                    }
                }); 
            }
        }
        fun1(arr);
    }
});

});

In my case what I noticed is fun1 is being called before the complete execution of code inside for loop. Like if for loop executed ones and the functions gets triggered. Because of this arr contains lesser entries. How can I call function fun1 only after complete execution of loop?

Answer 1

$.ajax returns a thenable .

Collect them in an array. Pass that array to Promise.all . Call fun1 when the promise returned by Promise.all resolves.