JavaScriptで検証ツール内console.logに'undefined'と表示される

Question

前提・実現したいこと

お世話になります。　
JavaScriptからPHPを呼び出してMySQLよりデータベースを取得しています。

'getAlbumTitle'にアルバム番号を投げるとアルバム名を返す関数を書いています。

発生している問題・エラーメッセージ

Functionの返り値を取得しようとすると、'undefined'が返ってきてしまいます。

問題点を教えて頂ければと思います。
とても簡単なミスと思われますが、ご教示お願い致します。
よろしくお願い致します。

該当のソースコード

const getAlbumTitle = function(num) {

	$.ajax({
		url:'./albumtitle.php',
		type:'POST',
		datatype: 'json',
		data:{
				'id' : num
				}
		})
		// 通信成功
		.done( function(data) {
			console.log('通信成功');
			console.log(data); // <-ここでは問題なく取得

			return data[0].albumTitle

		})
		// 通信失敗
		.fail( function(data) {
		$('#result').html(data);
				console.log('通信失敗');
				console.log(data); 
		})
};

console.log(getAlbumTitle(1)); // <-ここで'undefined'

---

試したこと

.done 内の「console.log(data);」は問題なく取得できています。
グローバルスコープを使用してみたりしましたが、
同様に値が保持できず断念しました。

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

PHP7.3.25
MySQL 5.7

Answer 1

関数getAlbumTitle()にはreturn文がないので、undefinedが結果になります。$.ajax()は非同期でコールバックを呼ぶので、関数getAlbumTitle()は$.ajax()を実行するとdone()のコールバックもfail()のコールバックも実行せずに呼び出し元に帰ります。

おそらくdoneのコールバック関数のreturnが返したいものなのでしょうけども、このコールバック関数の返り値がgetAlbumTitle()の返り値にはなりません。

getAlbumTitle()にコールバックの引数を足すか、async/awaitを使う必要があります。

コールバック引数

const getAlbumTitle = function(num, callback) {
    ...
        // 通信成功
        .done( function(data) {
          console.log('通信成功');
          console.log(data); // <-ここでは問題なく取得
          callback(data[0].albumTitle);
        })
    ...
};

getAlbumTitle(1, data => {
  console.log(data);
});

async/await

const getAlbumTitle = function(num) {
  return new Promise((resolve, reject) => {
    $.ajax({
      url:'./albumtitle.php',
      type:'POST',
      datatype: 'json',
      data:{'id' : num}
    })
    // 通信成功
    .done(function(data) {
       console.log('通信成功');
       console.log(data); // <-ここでは問題なく取得
       resolve(data[0].albumTitle);
    })
    // 通信失敗
    .fail(function(data) {
      $('#result').html(data);
      console.log('通信失敗');
      reject(data); 
    })
  });
};

async function foo() {
  let title = await getAlbumTitle(1);
  console.log(title);
}
foo();

Comments

[KsCom]

int32_t 様
早速のご回答ありがとうございます。
「コールバック関数」を試した所、思う動作になりました。
「async/await」の方は、現状を飲み込んでから進めたいと思います。
重ねて御礼申し上げます。
またの機会がございましたら、よろしくお願いいたします。