async/await で処理を待ちたい。

Question

駅データ.jp(API)の情報を取得した後に処理を実行したいのですが、
取得する前に実行されてしまうので、取得を待ちたいです。

    let xml = {};
    let group_data = [];
    function getGroup(code){
      let s = document.getElementsByTagName("head")[0].appendChild(document.createElement("script"));
      s.type = "text/javascript";
      s.charset = "utf-8";
      s.src = `http://www.ekidata.jp/api/g/${code}.json`;  //駅グループJSONデータURL
      // s.src = "http://www.ekidata.jp/api/g/1130224.json";  //サンプルコード
      let str = "";
      xml.onload = function(data){
        let station_g = data["station_g"];
        if(station_g != null){
          for( i=0; i< station_g.length; i++){
            group_data.push({'code':station_g[i].line_cd,'name':station_g[i].line_name});
          }
        }
      }
    }
    $(function(){
      $('body').on('click','.searchTrigger',(e) => {
        const target = $('#ekiInput').val();
        const code = data[target];
        getGroup(code);
        console.log(group_data)
      });
    });   

現在
console.log(group_data)
をすると空の配列が出力されてしまう。
xml.onload　を待ちたいのですが、
うまくいきません。。。

async/awaitを使ってなんとかすることは可能なのでしょうか。。。

Comments

[gentaro]

これ全部コード貼ってますか？抜粋ですか？
このコードだけだとイマイチ何で悩んでおられるのかわかりません。書かれたとおり動いてると思います。

このコードを見る限り、xmlという名の空オブジェクト（何らかのプロトタイプを継承しているコードもない）に「xml.onload というメソッドを追加している」だけで、「メソッドの呼び出し」すらしていないので、group_data配列が空なのは当たり前だと思います…。

async/await以前の問題の気がしますので、JavaScriptの基本的な部分をもうちょっと学ばれるべきかと思います。

[otolab]

ホントダ

Answer 1

jsの仕様上、処理を待つことはできない（同期化）んですが、処理が完了したときに次の処理を実行することならできます。

function f() {
  return new Promise((resolve, reject) => {
    asyncFunction((data) => {
      resolve(data)
    })
  })
}

function run() {
  f.then((data) => {
    console.log(data)
  })
}

こんなかんじ。これをasync, awaitで書くと、

async function f() {
  return new Promise((resolve, reject) => {
    asyncFunction((data) => {
      resolve(data)
    })
  })
}

async function run() {
  const data = await f()
  console.log(data)
}

こうなります。

元のコードと対応を取ると、

    asyncFunction((data) => {

これと

xml.onload = function(data) {

これが対応する感じです。

Comments

[gentaro]

ええ？これそういう問題なんですか？

処理を待つことができない、って、そもそもconsole.log()の呼び出しまでの一連の処理の中に非同期処理が存在しないんだから、元コードだと１ステップずつちゃんと待ってますよね…。

[otolab]

> console.log()の呼び出しまでの一連の処理の中に非同期処理が存在しない

xml.onloadの部分は非同期処理じゃないですか？なんか読み間違えてるかしら。

[miyabi_pudding]

横槍失礼します。

質問修正依頼拝見しました。
gentaroさんの言う通り、xmlの処理がそもそもおかしい感じですね・・・。
質問者さんは、XMLHttpRequestを入れているつもりなのだとは思いますが、エスパーですね　汗

----- 下記元コメント -----
otolabさんの見解で合っていると思いますよ。
元コードの、
getGroupメソッドでは、xml.onload内で、外部スコープのgroup_data配列変数に値をプッシュしてますので、
xml.onloadイベントの処理を待たずに、
getGroup呼び出しの次ステートメントの、
console.logの処理が実行されてしまいます。