ajaxで取得した値がreturnされません

Question

ajaxで値を取得したのですが、returnしても値がとれません。

$(function(){
  let lists = getLists(id);
  console.log(lists);
});

function getLists(id) {
  $.ajax({
    type: 'POST',
    url: '/test/test.json',
    data: {
      'id': id,
      'token_key': token()
    },
    cache: false,
    dataType: 'json',
  }).done(function(res) {
    let resLists = res.lists;
    console.log(resLists);
    createTable(resLists)
    return lists;
  }).fail(function(res) {
    alert("失敗しました");
    return [];
  });
}

function createTable(lists) {
  let table = $('#table tbody').children();
  if (table.length !== 0)
  {
      $('#table tbody').empty();
  }
  lists.forEach(function(val,key) {
    source = `
      <tr>
        <td>${val.name}</td>
        <td>${val.address}</td>
        <td>${val.email}</td>
      </tr>
    `;
    $('#table tbody').append(source);
  });
}

function token() {
//トークンを生成
}

console.log(lists)では、returnしている値を取得できませんでした。
でも、doneのところで実行しているconsole.log(resLists);は
値が取得できていることを確認しています。
また、その後実行しているcreateTable()でも値がとれていて
その後の処理も実行できました。

なぜreturnしているのに、console.log(lists)のところで値がとれないのでしょうか？
もしよければアドバイスよろしくお願いいたします。

Answer 1

jQueryメソッド、$.ajaxが、そのチェーンメソッド内でreturnさせた値を返すメソッドではないからです。
また、例え、返したとしても、
getLists(id)自体もreturnを実行せねばなりませんが、
そういった構文になっていないからです。

よって、lists変数を、扱えるスコープ上で、定義した上で、
getLists(id)を実行し、そのチェーンメソッド内で、lists変数に中身を入れるような構文を組まねばなりません。

Comments

[miyabi_pudding]

また、非同期処理なので、jQueryのajaxメソッドだと、扱いに工夫が必要になるので、
ネイティブのfetchメソッドなど、非同期処理をやりやすいメソッドを使った方がいいでしょう。

[Ummo]

回答ありがとうございます！！！
「$.ajaxが、そのチェーンメソッド内でreturnさせた値を返すメソッドではない」という事を知らず、勉強不足でした。
return $.ajax 〜 で丸ごと返し、lists変数のスコープ上で、以下を行ったら取得できました。
$(function(){
getLists(id)then(function(data) {
list = data.lists;
});
});
「ネイティブのfetchメソッドなど、非同期処理をやりやすいメソッドを使った方がいい」という部分についてもありがとうございます。こちらも調べてみます！
まったく分からず困っていたので、とても助かりました。本当にありがとうございました！