jsでasyncの使い方について

Question

お世話になっております。
あるWEBの仕組みで、起動時にDBから担当者名を取得し、セレクトボックスに表示させています。
localStrageに、前回選択していた担当者名が存在するなら、その値を取得し、セレクトボックスの内容を選択状態にしようと考えています。
最初、何も考えずに①DBから取得→②セレクトボックスへ流し込み→③localStrageに入っているValue値から、対応するセレクトボックスを選択状態に。としていましたが、DBから取得最中に③が走り、期待する動作をしません。
調べている中で、非同期処理にて対応すれば良いことがわかり、async関数を使うことにしました(promiseがいまいち理解出来ていないからなのですが…)。

下のコードを実行すると、コンソールには、1　→ Setemper2 →　2　→ Setemper1　の順で表示されます。
awaitのあるところで、処理が返るまで待機してくれるものかと思っていたのですが、その様ではなく。

何かいろいろ、考え違い(理解出来ていない)があると思うのですが、1　→　Setemper1　→　Setemper2　→　2
の順で処理させるにはどの様にすればよいのでしょうか。ご教示お願い致します。

async function hoge() {
    console.log('1');
    await SetEmper(getDept);  //担当者セット
    console.log('2');
}

hoge('01211');

function SetEmper(deptCode) {
    tempDeptCode = deptCode;
    $.ajax({
        url: 'php/getStdInfo.php',
        dataType: 'Json',
        type: 'GET',
        data: {type: 'deptemp',
            deptcode: tempDeptCode},
        success: function (data) {
            //現在のリストを削除
            $('#ddlEmp').children().remove();
            $.each(data, function () {
                $('#ddlEmp').append($('<option>').attr({value: this.EMP_CODE}).text(this.EMP_NAME));
            });
            console.log('Setemper1');
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            console.log(textStatus);
            return;
        }

    });
    console.log('setemper2');
}

Answer 1

jQuery の Deferred/Promise オブジェクトはネイティブの Promise オブジェクトではないため、awaitで待つことはできません。
jQueryの仕様に従い、$.ajax()の戻りをreturnで返してそれのdoneメソッド等を呼ぶか、そうでなければ ajax ではなく、Fetch API に置き換えたらどうでしょうか？
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API

Comments

[hanzoumon]

ご回答有難う御座います。URL拝見させて頂きました。サンデー片手間PGの私には、かなり高度な内容に感じました。fetchAPI、ちょっと勉強させて頂きます。有難う御座いました。

Answer 2

$.ajax() が返す promise の中に実は取得したデータが入ってるので、これを使うと簡潔に書けます。エラーは try-cache で補足します。

async function hoge() {
  console.log('1');
  await SetEmper(getDept);
  console.log('2');
}

async function SetEmper(deptCode) {
  tempDeptCode = deptCode;
  try {
    const data = await $.ajax({
      url: './data.php',
      dataType: 'json',
      data: {type: 'deptemp', deptcode: tempDeptCode}
    });
    $('#ddlEmp').children().remove();
    $.each(data, function () {
      $('#ddlEmp').append($('<option>').attr({value: this.EMP_CODE}).text(this.EMP_NAME));
    });
    console.log('SetEmpr1');
  } catch (err) {
    console.log(err.statuxText);
  }
  console.log('SetEmpr2');
}

あとこれは本題から外れちゃうのですが、念のため書いておきます。

• getDept はもしかして getDept() では無いでしょうか。
• tempDeptCode = deptCode でグローバル変数を汚染しちゃってます。

Comments

[hanzoumon]

ご回答、有難う御座います！基本的な動作、勉強になりました。
すみません、ソースがおかしかったですね。hogeの引数になんの意味もありませんでした。
ご指摘のとおり、ここは部門コードをとってくる関数が入ります。
あと、変数の汚染。ご指摘の通りです。こういったところに横着してしまいますね…　正に素人です。
時間の差で、最初の回答者の方をベストアンサーにしましたが、set0gut1様の書かれたコードが、基本となる様に思います。今後のテンプレとさせて頂きます。有難う御座いました！

[set0gut1]

コメントありがとうございます！またいつでもどうぞ。

Answer 3

非同期部分は$.ajaxなので、そこをawaitしてやればいいのかと思います。

SetEmperのほうを以下のように書き換えることで期待した動作になりますか？
※jQueryのバージョンでうまく動かなかったらすいません

async function SetEmper(deptCode) {
    tempDeptCode = deptCode;
    await $.ajax({
        url: 'php/getStdInfo.php',
        dataType: 'Json',
        type: 'GET',
        data: {type: 'deptemp',
            deptcode: tempDeptCode},
        success: function (data) {
            //現在のリストを削除
            $('#ddlEmp').children().remove();
            $.each(data, function () {
                $('#ddlEmp').append($('<option>').attr({value: this.EMP_CODE}).text(this.EMP_NAME));
            });
            console.log('Setemper1');
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            console.log(textStatus);
            return;
        }

    });
    console.log('setemper2');
}

Comments

[hanzoumon]

ご回答、有難う御座います。ご教示頂いた内容で思った通りに動きました！大変助かりました。
なるほど、そちらにawaitをつけるのですね。やはり、勉強不足でした。
早速のご回答、有難う御座いました。