タイガーラック クリエイティブブログ
2024
May
30

【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) {
    // 処理
});


このカテゴリの最新記事

関連記事

SHOP LIST

タイガーラック株式会社

〒577-0056
大阪府東大阪市長堂1-3-14 TOKUYASU Bld.