複数の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>
// 順次
hogeAjax().then(function(data) {
    console.log(data.args.param);
    return fugaAjax();
}).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の最初に受け取ったレスポンスに対して実行させる