2024
October
17
【jQuery】jQuery.when() での複数の非同期処理の扱いと条件分岐
経緯
jQueryで複数のajax処理すべて並行処理をして、それらが完了した後に処理を行いたい。
その場合、jQueryのwhen関数を使うといいらしい。
例えば
1. APIを使ってデータAをajaxで取得する
2. APIを使ってデータBをajaxで取得する
3. データAとデータBどちらも取得してから、処理を行う
みたいなことがしたい。
使用したjQueryのバージョン
jQuery バージョン:3.6.1
ソースコード
以下の書き方で成功した。
$.when(
getDataA(),
getDataB()
)
.done(function(dataA,dataB) {
// データAとデータB取得後の処理をここに書く
console.log(dataA);
console.log(dataB);
})
.fail(function() {
// when()内の非同期通信が失敗した時
console.log('error');
});
function getDataA(){
var result;
var apiPath = '---';
var deferred = new $.Deferred();
$.ajax({
type: "GET",
url: apiPath,
dataType:"json",
}).done(function(data) {
result = data;
}).fail(function() {
deferred.resolve(result);
}).always(function() {
deferred.resolve(result);
});
return deferred.promise();
}
function getDataB(){
var result;
var apiPath = '---';
var deferred = new $.Deferred();
$.ajax({
type: "GET",
url: apiPath,
dataType:"json",
}).done(function(data) {
result = data;
}).fail(function() {
deferred.resolve(result);
}).always(function() {
deferred.resolve(result);
});
return deferred.promise();
}
when()の引数に判定を加えたい
上記ソースコードにある、when() の中にはいくつでも処理が書ける。
それと、例えばflagという変数がtrueの場合のみgetDataB()を行いたい時は、if文(文)ではなくて三項演算子(式)で判定する。
var flag = true;
$.when(
getDataA(),
flag ? getDataB() : undefined
)
.done(function(dataA,dataB) {
// 処理
});
このカテゴリの最新記事
2024.10.03
【Laravel】主キーが文字列型の場合に値を取得できない問題と解決法
2023.09.04
【jQuery】slickでスライダーの位置がズレる時の対処法
2023.12.06
【Laravel】MiddlewareでIP制限をする
2023.04.07
実務でよく使うVSCodeのショートカット7選