Javascript 非同期処理終了後に別の処理を行いたい

Question

前提・実現したいこと

Leafletを用いて、マップを描画し、クリックイベントを実装しています。
クリックイベントでは、ajax通信にて、pythonでデータベースの更新、参照を行い、javascriptにて、扱っています。

概略の実現したいことを以下に記述します。(わかりにくいかもしれません、すみません)

A()→データベースaの内容Aを内容Bに更新
B()→データベースaの内容を参照

A(),B()をクリックイベント関数内にて、実装した時に、
B()で、データベースaの内容Bを参照したいのですが、内容Aを参照している状況です。

以下の自分のソースコードでは、postVisitedNode()の処理が完了次第(レスポンス返答後)、achievement_rate()の処理を行いたいです。

該当のソースコード

一部省略しているところがあります。(レイヤーやオプションなど)
onEachNodeFeature = function(feature, layer) {
    layer.on('click', function(e) {
        let visited = e.target.feature.properties.visited
        postVisitedNode(visited.node_id);//隣接ノード描画
        achievement_rate();//達成率の更新
        L.DomEvent.stopPropagation(e);
    })
}

function showVisitedListLayer(geojson) {
    // visitedListLayer上のマーカをクリアする．
    if (visitedListLayer != null) {
        mymap.removeLayer(visitedListLayer);
    }

    // マーカを生成する．
    visitedListLayer = L.geoJSON(geojson, {
        pointToLayer: function(feature, latlng) {
            switch (feature.properties.visited.state) {
                case 2: return L.circleMarker(latlng, visitedMarkerOptions);
                case 1: return L.marker(latlng, {icon:pulsingIcon2});
                case 0: return L.circleMarker(latlng, unvisitedMarkerOptions);
            }
        },
        onEachFeature: onEachNodeFeature,
    });
    // マップレイヤにvisitedListLayerを追加する．
    visitedListLayer.addTo(mymap);
}

function postVisitedNode(node_id) {
    $.ajax({
        url: 'visit/',
        method: 'GET',
        data: {
            'node_id': node_id,
        },
        timeout: 10000,
        dataType: "json",
    }).done(function(response) {
        let geojson = response;
        showVisitedListLayer(geojson);
//        console.log(geojson);
    }).fail(function(response) {
        window.alert('postVisitedNode() : レスポンス失敗');
    });
}

function achievement_rate() {
    $.ajax({
        url: 'achievement_rate/',
        method: 'GET',
        data: {
        },
        timeout: 10000,
        dataType: "json",
    }).done(function(response) {
        let geojson = response;
        showachievementLayer(geojson);
//        console.log(geojson);
    }).fail(function(response) {
        window.alert('achievment_rate() : レスポンス失敗');
    });
}

試したこと

非同期通信になっているのは、ajax通信を用いている、API通信を用いている、のどちらかだとおもうのですが、、、
完了を待つ方法として、promise,async/awaitを使う方法があるのは分かったのですが、
クリックイベント内(onEachFeatureオプション内)にて上手く実装することができませんでした。
ご教授していただけたら幸いです。

補足情報（FW/ツールのバージョンなど）

leaflet1.7.1
python3.7

Answer 1

この程度の規模なら普通にajaxのdoneで呼び出せば良いのでは…？
成否に関わらず実行したいならalwaysですね。

Answer 2

こんな感じでしょうか。
postVisitedNode関数でDeffered(promiseオブジェクトみたいなもの)を返すようにして、それを使ってpostVisitedNode関数が完了したときに実行する内容を登録すればいいと思います。

ちなみに$.ajax()はjavascript標準のPromiseオブジェクトではなく、それに似たDefferedというオブジェクトを返します。
(jqueryが開発されていた当時はまだjavascript標準のPromiseが無かったため、独自実装されたものです)
doneやfailは標準のPromiseオブジェクトに準拠していない古いメソッドなのでthen、catchを使ったほうがいいと思います。

function postVisitedNode(node_id) {
    return $.ajax({ // ●関数は、やがてajax処理とthenブロックの処理が完了することを示すDefferedオブジェクトを戻す
        url: 'visit/',
        method: 'GET',
        data: {
            'node_id': node_id,
        },
        timeout: 10000,
        dataType: "json",
    }).then(function(response) { // ●doneではなくthenを使う
        let geojson = response;
        showVisitedListLayer(geojson);
//        console.log(geojson);
    }).catch(function(response) { // ●failではなくcatchを使う
        window.alert('postVisitedNode() : レスポンス失敗');
    });
}

postVisitedNode(visited.node_id).then(function() { // ●postVisitedNodeの処理が完了したときに実行する内容を登録する
  achievement_rate(); //達成率の更新
});

Comments

[okiron9619]

ku__ra__ge様
丁寧な説明、回答ありがとうございます。
質問に質問を重ね申し訳ありませんが、2点質問があります。
1.回答していただいたコードのajax通信部分の
return $.ajax({ // ●関数は、やがてajax処理とthenブロックの処理が完了することを示すDefferedオブジェクトを戻す
url: 'visit/',
……
上記のreturnは、postVisitedNodeの処理が完了したかどうかを判定するための戻り値として、必要という理解であっていますでしょうか。

2.今回の場合とは少し異なりますが、
A()→データベースaの内容Aを内容Bに更新
B()→データベースbの内容Cを内容Dに更新
C()→データベースaから内容Bを、データベースbから内容Dを参照する
上記のような場合、A(),B()は非同期で終了後C()を実行のような形にする時
単純ですが、A()終了後、B()を実行、B()終了後C()を実行のように同期通信のような形が思いつくのですが、微妙のような気がします。
この場合は、他の方が回答していただいたようなコードの実装が必要なのでしょうか。
重ね重ねの質問となり、申し訳ありません。

[ku__ra__ge]

> 上記のreturnは、postVisitedNodeの処理が完了したかどうかを判定するための戻り値として、必要という理解であっていますでしょうか。
はい、そういうことです。

> A()終了後、B()を実行、B()終了後C()を実行のように同期通信のような形が思いつくのですが、微妙のような気がします。
そういった場合$.whenを使います。js標準のPromiseだとPromise.allにあたる処理です。
以下urlはまさにそうった例を説明しています。
https://www.tam-tam.co.jp/tipsnote/javascript/post5807.html

Answer 3

jQueryなら$.ajaxでdoneで処理。
複数つかうなら$.Defferedや$.whenなども有効
jsならfetchでいけますが複数ならPromise.allなどを絡めます