Tips on using jq to send multiple ajax and then execute callbacks

This time I will bring you tips on how to use jq to send multiple ajax and then execute callbacks. Use jq to send multiple ajax and then execute callbacks. What are the precautions?. Here are practical cases. Let’s take a look. take a look.

Recommended axios.js
Axios is a promise-based HTTP library that can be used in browsers and node.js.

Create XMLHttpRequests from the browser

Create http requests from node.js

Support PromiseAPI

Interception of requests and responses

Conversion Request data and response data

Cancel request

Automatically convert JSON data

Client supports defense against XSRF

The following is based onjquery The code is not axios.js code.

My test is valid. If someone uses the following method and it still doesn't work, you can explain it in the comments below. Axios.js is a promise-based HTTP library. It is recommended that you browse Axios.js on npm, the Chinese version of the portal. The following content is not important. . .

I have seen two solutions to this problem:
(Personally, I think the first method is better)

1. The first is the counting method, which needs to be outside Declare a variable that can be accessed by each callback. Add this variable by 1 in the callback function of each successful request. If the variable is increased to the maximum, the callback will be executed, but it needs Make a judgment in the callback function of each successful request.

Features: Since ajax is inherently asynchronous, each ajax does not interfere with each other and does not have to be loaded one after another in order. The total request time is shorter than the second type below.

Demo of counting method

function countAjax(arr,cb) {    var len = arr.length,
        result = [],
        count = 0;    for(let i=0; i<len; i++) {
        $.ajax({            type: arr[i].type,            url: arr[i].url,            success: function(res){
                count++;
                result[i] = res;                console.log("第" + ( i + 1 ) + "个ajax回调函数 " + res);                if( count == len ) {
                    cb(result);
                }
            }
        });
    }
}var arr = [{    url: "keepWords",    type: "get"},{    url: "xx",    type: "get"},{    url:"yy",    type: "get"}];
countAjax(arr,function(result){    console.log("all of ajax is done",result);
});

Personal test is effective. You can setTimeout on the server to simulate network delay
Tips, if someone uses the following method and it still doesn't work, you can leave a comment below illustrate!

2. The second is to use promise to send the next request after the previous request is completed.
Features: Each ajax must be queued to request and respond in order. The next request needs to be made after the previous request is successfully responded to, one after another.

promise's demo

function orderAjax(arr,cb) {    var promise,
        result = [];    for(let i=0,len=arr.length; i<len; i++) {        if(!promise) {
            promise = $.ajax({                url: arr[i].url,                type: arr[i].type
            });
        }else {
            promise = promise.then(function(res) {
                result.push(res);                console.log("第" + ( i ) + "个ajax回调函数 " + res);                return $.ajax({                    url: arr[i].url,                    type: arr[i].type
                });
            })
        }
    }
    promise.then(function(res){
        result.push(res);        console.log("第" + ( arr.length ) + "个ajax回调函数 " + res);
        cb(result);
    });
}var arr = [{    url: "keepWords",    type: "get"},{    url: "xx",    type: "get"},{    url:"yy",    type: "get"}];
orderAjax(arr,function(result) {    console.log(&#39;all of ajax is done&#39;,result);
})

Personal testing is effective. You can setTimeout on the server to simulate network delay
Tips, if someone uses the following method and it still doesn't work, you can explain it in the comments below !
In addition, axios.js is highly recommended
Axios is a promise-based HTTP library that can be used in browsers and node.js.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

Detailed explanation of the Counters property of css

Detailed explanation of JavaScript function overloading

The above is the detailed content of Tips on using jq to send multiple ajax and then execute callbacks. For more information, please follow other related articles on the PHP Chinese website!