Because We Love Happy Coding

フリーライターからエンジニア × 講師。発信力だけあり余ってる感じ

jQuer.ajaxの戻り値を待ちたい

JavaScript jQuery

今日もまたコーディング。だって僕らはHappy Codingが大好きだから。

目次

環境

ajaxを待ってくれない

web上のリソースにJavaScriptでアクセスしたくてこんなコードを書いた。

async function getData() {
  $.ajax({
    type: 'GET',
    url: 'https://some.url.json',
    datatype: 'json',
    async: false,
  }).done(function(data, textStatus, jqXHR){
        return data;
  }).fail(function(data, textStatus, jqXHR){
    console.error('data: '+ data);
    console.error('textStatus' + textStatus);
    console.error('jqXHR' + jqXHR);
  }).always(function (jqXHR, textStatus) {});
}

async function main(){
  const data = await getData();
  console.log('data: ' + data);
}

main();

console.log('data: ' + data);の出力はundefined。挙動を見ても、await getData()が待ってくれてない。

done()の中の処理はたしかに待ってくれているのだけれど、どうも$.ajax()の行を置き去りにgetDataの中は末尾まで進んで勝手にundefinedで終了している。考えてみればawaitを一個も書いてないのだから、当然だ。

解決方法

まさにこれ↓だった。

Using async await with jQuery's $.ajax • 🔥 Database Critical 🔥

つまりawait $.ajaxのようにして、その戻り値をreturnしてやれば、正しく戻り値を待ってくれるということになる。

ほかにもこんな記事が参考になりそう。