2023
July
12
【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) {
// 処理
});このカテゴリの最新記事
2025.11.14
ファイル内容は同じなのに Git が差分を検出する問題を .gitattributes で解決した話
2023.09.22
PostgresSQLでカンマ区切りのデータを個別にカウントする方法
2026.04.30
Claude Code Teamプランの「週次ローリング制限」とは?
2023.05.24
【git】defaultブランチ名の変更