複数のAjaxの最初に受け取ったレスポンスに対して実行させる

対象読者

• async, awaitをソースに書くと死んじゃう病の人
• jQueryの$.ajaxを利用する人

バージョン

jQuery: 3.6.0

最初以外のレスポンスも受け取る場合

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<script>
// ひとつが終わったら
(function() {
    const dfd = $.Deferred();
    let canRunHogeAjaxThen = true;
    let canRunFugaAjaxThen = true;
    let didRunHogeAjaxCatch = false;
    let didRunFugaAjaxCatch = false;

    hogeAjax().then(function(data) {
        if (canRunHogeAjaxThen) {
            canRunFugaAjaxThen = false;
            dfd.resolve(data);
        }
    }).catch(function(e) {
        console.log(e);
        didRunHogeAjaxCatch = true;
        if (didRunFugaAjaxCatch) {
            dfd.reject(new Error("hogeAjax, fugaAjaxともにエラー"));
        }
    });

    fugaAjax().then(function(data) {
        if (canRunFugaAjaxThen) {
            canRunHogeAjaxThen = false;
            dfd.resolve(data);
        }
    }).catch(function(e) {
        console.log(e);
        didRunFugaAjaxCatch = true;
        if (didRunHogeAjaxCatch) {
            dfd.reject(new Error("hogeAjax, fugaAjaxともにエラー"));
        }
    }); 

    return dfd;
})().then(function(data) {
    console.log(data.args.param);
}).catch(function(e) {
    console.log(e);
});

function hogeAjax() {
    return $.ajax({
        url: "https://httpbin.org/delay/5",
        type: "GET",
        data: {
            param: "ほげほげ",
        }
    });
}

function fugaAjax() {
    return $.ajax({
        url: "https://httpbin.org/delay/1",
        type: "GET",
        data: {
            param: "ふがふが",
        }
    });
}
</script>

最初以外のレスポンスを受け取りたくない場合

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

<script>
// ひとつが終わったら
(function() {
    let hogeXHR = hogeAjax();
    let fugaXHR = fugaAjax();
    let isHogeAbort = false;
    let isFugaAbort = false;
    const dfd = $.Deferred();

    hogeXHR.then(function(data) {
        fugaXHR.abort();
        isFugaAbort = true;
        dfd.resolve(data);
    }).catch(function(e) {
        if (isHogeAbort === false) {
            dfd.reject(e);
        }
    });

    fugaXHR.then(function(data) {
        hogeXHR.abort();
        isHogeAbort = true;
        dfd.resolve(data);
    }).catch(function(e) {
        if (isFugaAbort === false) {
            dfd.reject(e);
        }
    }); 

    return dfd;
})().then(function(data) {
    console.log(data.args.param);
}).catch(function(e) {
    console.log(e);
});

function hogeAjax() {
    return $.ajax({
        url: "https://httpbin.org/delay/5",
        type: "GET",
        data: {
            param: "ほげほげ",
        }
    });
}

function fugaAjax() {
    return $.ajax({
        url: "https://httpbin.org/delay/1",
        type: "GET",
        data: {
            param: "ふがふが",
        }
    });
}
</script>

類似記事

複数のAjaxを順番に実行させる
複数のAjaxのレスポンスを全て受け取ったら実行させる