複数同時要求
同じページで複数のajaxリクエストが同時に生成される場合がありますが、ユーザー体験のためにパラレルリクエストを送信することが望ましいです.これは同時問題が発生します.どのように処理すればいいですか.
へいれつへんれつ
この方法は最も簡単で、1つのリクエストが実行された後に別のリクエストが実行されることです.コードは次のとおりです.
1)コールバックで次の要求を実行する
2)ajaxを同期に変更し、順次実行
明らかに、この方法は比較的長い待ち時間を必要とし、ユーザー体験はあまりよくありません.
カウンタの使用
フラグビットタグリクエストが完了したかどうか
1)サイクル非ブロック
この方法は性能に影響し、できるだけ少なく使用します.
2)コールバックカウント
サードパーティ製フレームワークの実装
サードパーティ製フレームワークを使用して実装する場合は、サードパーティの関連ドキュメントを参照してください.
1)jquery
2)axios
Angularの$wacthなど、多くのフレームワークがあります.
ES 6で実現
ES 6のpromise、asyn、awaitなどを使っても実現できるはずですが、本人はまだ使ったことがないので、しばらく言わないで、その時になってから補充します.
へいれつへんれつ
この方法は最も簡単で、1つのリクエストが実行された後に別のリクエストが実行されることです.コードは次のとおりです.
1)コールバックで次の要求を実行する
functionasync1() {
//do sth...
async2();
}
functionasync2() {
//do sth...
}
async1();
2)ajaxを同期に変更し、順次実行
var url1,url2;
$.ajax({
url: url1,
async: false
});
$.ajax({
url: url2,
async: false
});
明らかに、この方法は比較的長い待ち時間を必要とし、ユーザー体験はあまりよくありません.
カウンタの使用
フラグビットタグリクエストが完了したかどうか
1)サイクル非ブロック
この方法は性能に影響し、できるだけ少なく使用します.
var cnt =0;
functionasync1() {
//do sth...
cnt++;
}
function async2() {
//do sth...
cnt++;
}
async1();
async2();
var interval = setInterval(function(){
if (2 === cnt) {
console.log(' ');
clearInterval(interval)
}
}, 0);
2)コールバックカウント
var cnt = 0;
function async1() {
//do sth...
callback();
}
function async2() {
//do sth...
callback();
}
function callback() {
cnt++;
if (2 == cnt)
console.log(' ');
}
async1();
async2();
サードパーティ製フレームワークの実装
サードパーティ製フレームワークを使用して実装する場合は、サードパーティの関連ドキュメントを参照してください.
1)jquery
var d1 =$.Deferred();
var d2 =$.Deferred();
functionasync1() {
d1.resolve("Fish");
}
functionasync2() {
d2.resolve("Pizza");
}
async1();
async2();
$.when(d1,d2).done(function(v1, v2) {
console.log(v1 + v2 + ' ');
});
2)axios
//
axios.all([get1(),get2()])
.then(axios.spread(function(res1,res2) {
// , catch
}));
Angularの$wacthなど、多くのフレームワークがあります.
ES 6で実現
ES 6のpromise、asyn、awaitなどを使っても実現できるはずですが、本人はまだ使ったことがないので、しばらく言わないで、その時になってから補充します.