fetch()で取得したjsonを関数外で扱いたい

Question

前提

fetch()で取得したjsonを扱いたい。

実現したいこと

getData関数で取得したjsonを関数の外で扱いたいです。
getData().dataを実行すると以下のエラーメッセージが出力されます。

TypeError: Cannot read properties of undefined(reading "data")

該当のソースコード

getData() {
    const url = "https://umayadia-apisample.azurewebsites.net/api/persons/Shakespeare";
    fetch(url)
    .then(res => res.json())
    .then(data => {
        return data;
    })
};

Answer 1

window.addEventListener('DOMContentLoaded', async()=>{
  const getData=async()=>{
    const url = "https://umayadia-apisample.azurewebsites.net/api/persons/Shakespeare";
    return await fetch(url).then(res => res.json())
  };
  const data=await getData();
  console.log(data);
});

便宜上DOMContentLoadedのコールバックを利用していますが、別にasyncできればなんでもいいです

(async()=>{
  const getData=async()=>{
    const url = "https://umayadia-apisample.azurewebsites.net/api/persons/Shakespeare";
    return await fetch(url).then(res => res.json())
  };
  const data=await getData();
  console.log(data);
})();

Answer 2

質問文の関数 getData() には return がないので、そのようなエラーになります。

getData() を以下のように変更して、

async function getData() {
    const url = "https://umayadia-apisample.azurewebsites.net/api/persons/Shakespeare";
    const res = await fetch(url);
    return await res.json();
};

呼びだしでは (await getData()).data のようにします。呼び出している関数も async を付ける必要があります。

Comments

[katprogram]

(await getData()).dataを実行すると、
SyntaxError: Unexpected identifier　というエラーが出力されるのですがなぜでしょう？