집 > 기사 > 웹 프론트엔드 > jq를 사용하여 여러 Ajax를 보낸 다음 콜백을 실행하는 방법에 대한 팁

jq를 사용하여 여러 Ajax를 보낸 다음 콜백을 실행하는 방법에 대한 팁

php中世界最好的语言원래의: 2018-03-09 13:52:332530검색

이번에는 jq를 사용하여 여러 ajax를 보낸 후 콜백을 실행하는 방법에 대한 팁을 알려드리겠습니다. jq를 사용하여 여러 ajax를 보낸 후 콜백을 실행하는 주의 사항은 무엇입니까? .

추천 axios.js
Axios는 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 라이브러리입니다. + XSRF 방어

다음 코드는 axios.js 코드가 아닌

jquery

를 기반으로 합니다.

테스트해본 결과 작동합니다. 아래 방법을 여전히 사용할 수 없는 경우 아래 댓글로 설명해 주세요. Axios.js는 Promise 기반 HTTP 라이브러리입니다. 포털의 중국어 버전인 Axios.js를 검색하는 것이 좋습니다. . .

저는 이 문제에 대한 두 가지 해결책을 보았습니다.

(개인적으로는 첫 번째 방법이 더 좋다고 생각합니다)

1. 첫 번째는 각 콜백에서 액세스할 수 있는 외부 메서드를 선언해야 하는 계산 방법입니다.

, 요청이 성공할 때마다

콜백 함수

에서 이 변수를 1씩 증가시킵니다. 변수가 최대로 증가하면 콜백이 실행되지만, 성공할 때마다 콜백 함수에서 판단이 필요합니다.

특징: ajax는 본질적으로 비동기식이므로 각 ajax는 서로 간섭하지 않으며 순서대로 차례로 로드할 필요가 없습니다. 총 요청 시간은 아래 두 번째 유형보다 짧습니다.

계산 방법 데모

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);
});

개인 테스트로 효과적입니다. 서버에서 Timeout을 설정하여 네트워크 지연을 시뮬레이션할 수 있습니다.

팁, 다음 방법을 사용해도 여전히 작동하지 않는 경우 댓글로 설명해 주세요. 아래에!

2. 두 번째는 이전 요청이 완료된 후 다음 요청을 보내겠다는 약속을 사용하는 것입니다.

특징: 각 Ajax는 순서대로 요청하고 응답하기 위해 대기열에 있어야 하며 이전 요청이 성공적으로 응답된 후에 다음 요청이 이루어져야 합니다.

약속 데모

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);
})

개인 테스트, 작동합니다. 서버에서 시간 제한을 설정하여 네트워크 지연을 시뮬레이션할 수 있습니다. 팁, 누군가가 여전히 다음 방법을 사용할 수 없다면 아래 댓글로 설명해 주세요! 또한 axios.js를 적극 권장합니다Axios는 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 라이브러리입니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!