【JavaScript】fetchで取得したデータを変数にセットして自由に使いたい

Question

前提・実現したいこと

以下コードでは、
api()関数でfetchを使いhttpリクエストを投げ、取得した情報がdata変数に格納されています。
このdataをfunc()関数で使いたいのですが、そこがうまくいきません。（dataを呼んでも値がundefinedになります）

.then(data => {・・・・・})の中で他の関数を使えばもちろんdataは使えるのですが、
以下コードのような形でdataを呼び出せる方法はありますか？

該当のソースコード

function api(_id) {
  const id = _id
  const request = `https://app.com?id=${id}`
  fetch(request, {
      method: "GET",
    })
    .then(response => response.text())
    .then(data => {
      console.log(data); // この`data`を関数の外（他の関数など）で使いたい
      return data; // returnで返してもundefinedになる
    });
}

function func() {
  const getData = api('id111')
  console.log(getData) // undefinedになる
}

func()

Answer 1

以下コードのような形でdataを呼び出せる方法はありますか？

直接的にはありません。データは非同期でしか取れないのに対して、関数は同期的に戻ってしまいます。

なお、async-awaitを使えば、見た目だけは「引数をそのまま使う」ように書けます（実際にはすべてが非同期に動作します）。

Comments

[true_colors_20]

async-awaitを初めて知りました。
ここらへんをもう少し調べてみます。ありがとうございます。

Answer 2

処理的にはこんな感じです

Comments

[yambejp]

const api=async(_id)=>{
const id=_id;
const url="http://exsample.com?id="+encodeURIComponent(_id);
return await fetch(url).then(response => response.text())
}

const func=async()=>{
const getData = await api('id111');
console.log(getData);
}

func();

ただしCORSが絡むので、urlは同じドメイン内のファイルを直接指定する前提にした方がよいでしょう

[true_colors_20]

コードのご教授ありがとうございます。最終的に外部APIを叩くのでCORSになると厳しいですね、、、

[yambejp]

> 最終的に外部APIを叩く

外部APIの仕様次第ですね。
外部から参照されることを前提としていないなら難しそうですが
ご自身で簡易的なhttpdを立てて、クローリングするという手もあります。
API側がJSONPかなにかで対応してくれるのがベターですけどね