jq を使用して複数の ajax を送信し、コールバックを実行する場合のヒント-jsチュートリアル-php.cn

jq を使用して複数の ajax を送信し、コールバックを実行する場合のヒント

php中世界最好的语言

リリース： 2018-03-09 13:52:33

オリジナル

2486 人が閲覧しました

今回は、jq を使用して複数の ajax を送信し、その後コールバックを実行する方法についていくつかのヒントを紹介します。jq を使用して複数の ajax を送信し、その後コールバックを実行するための注意事項について説明します。見て。

axios.js をお勧めします

Axios は、ブラウザーと
node.js で使用できる Promise ベースの HTTP ライブラリです。 + XSRF に対する防御

次のコードは、axios.js コードではなく、

jquery

に基づいています。

私がテストしたところ、うまくいきました。以下の方法をまだ使用できない場合は、以下のコメントで説明してください。 Axios.js は Promise ベースの HTTP ライブラリです。Axios.js は中国語版のポータルで参照することをお勧めします。以下の内容は重要ではありません。。。

この問題に対する解決策は 2 つあります:

(個人的には最初の方法の方が良いと思います)

1. 1 つ目は、各コールバックでアクセスできる外部メソッドを宣言する必要がある

変数です。

、成功した各リクエストの

コールバック関数

内でこの変数を 1 ずつ増やします。変数が最大値まで増加するとコールバックが実行されますが、その判断は成功したリクエストのコールバック関数内で行う必要があります。

特徴: ajax は本質的に非同期であるため、各 ajax は互いに干渉せず、順番に次々にロードする必要がありません。合計のリクエスト時間は、以下の 2 番目のタイプよりも短くなります。

カウント方法のデモ

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

ログイン後にコピー

個人的なテストです。ネットワーク遅延をシミュレートするためにサーバーでsetTimeoutを実行できます

ヒント、誰かが次の方法を使用してもまだ機能しない場合は、コメントで説明できます。下に！

2. 2 つ目は、Promise を使用して、前のリクエストが完了した後に次のリクエストを送信することです。

特徴: 各 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);
})

ログイン後にコピー

個人的にテストしたところ、ネットワーク遅延をシミュレートするためにサーバーにsetTimeoutを設定できますヒント、誰かが次の方法を使用してもまだ機能しない場合は、以下のコメントで説明できます。さらに、axios.js を強くお勧めします Axios は、ブラウザーと Node.js で使用できる Promise ベースの HTTP ライブラリです。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。