JavaScriptの非同期処理の呼び出し方

Question

JavaScriptで非同期処理を呼び出す際にawaitって必要なのでしょうか。

書かれているサイトと書かれていないサイトがあり、どうすればよいのかがいまいちわかりません。
なくても期待動作をしているように見えるのですが、判断の仕方を教えていただきたいです。

理由も添えていただけると幸いです。

  const myFetch = async () => {
    const response = await fetch("URL");

    const json = await response.json();
    return json;
  });

  // どちらが正しいのかよくわからない※後続の処理は例です。
  // const result = myFetch()
  // const result = await myFetch()

  if(result.length != 0) {
    console.log("データあり");
  } else {
    console.log("データなし");
  }

Comments

[m.ts10806]

参考にした記事urlとご自身の現在の理解を具体的に記載してください

Answer 1

myFetchがasyncでない場合fetchの戻り値をawaitで処理できず
myFetchが戻り値を得ようとしてもfetchの結果を得ることができません

sample

const func1=()=>fetch('sample.json').then(res=>res.json());
const func2=async()=>{
  const res=await fetch('sample.json');
  return res.json();
};
const func3=()=>{
  const res=fetch('sample.json');
  return res.json();
};
(async ()=>{
  console.log(await func1());//fetchがthenしていればfuncにasyncは不要
  console.log(await func2());//asyncしておけばfetchをawaitしてres.json()できる
  console.log(await func3());//fetchの戻り値を利用してjson()できないのでエラー
})();

Answer 2

JavaScriptで非同期処理を呼び出す際にawaitって必要なのでしょうか。

必須ではありませんが、awaitの有無で動きが異なります。

なくても期待動作をしているように見えるのですが

const result = myFetch()
awaitがない場合は、以降の行は非同期処理が終わるのを待たずに実行されます。
戻り値は非同期処理を示すPromiseオブジェクトです。
このPromiseオブジェクトからthenメソッド等で結果を取り出さないと非同期処理の結果は得られません。

const result = await myFetch()
awaitがある場合は、以降の行は非同期処理が終わった後に実行されます。
戻り値は非同期処理の結果です。

上記のように戻り値が異なるので「なくても期待動作をしているように見える」というのは勘違いです。

判断の仕方を教えていただきたいです。

ドキュメントを読んで、async/awaitの機能を理解ください。
非同期関数 - JavaScript | MDN

Answer 3

resultから.thenなどを挟まずに結果を取りたい場合は、awaitが必要です。

awaitなしでasync関数を呼ぶと、返り値はPromiseとなって、直後にresult.lengthのような使い方をすることはできません（結果を使わず、非同期処理が終わるのを待つ必要もないならawaitなしでも問題ありません）。

Comments

[maisumakun]

> なくても期待動作をしているように見えるのですが

resultがPromiseの場合、result.lengthはundefinedになります。undefinedと0は等しくないので、myFetchの結果に関わらず、「データあり」の方へ進んでしまいます。