見出し画像

【JavaScript】fetchでthenを使いまくるより、関数を非同期関数にして、asyncとして、変数のfetchやほかの変数でawaitとしたほうが分かりやすいよね？🤔

ごろじ

`async/await` 構文を使うことで、非同期コードをより読みやすく、そして直感的に書くことができます。この構文は、JavaScriptの非同期処理をより簡潔に、そして同期処理のように扱うことを可能にします。

従来の `.then()` チェーンを使用した非同期処理は、特に複数の非同期処理を扱う場合にコードが煩雑になりがちでした。それぞれの `.then()` がネストされていくことで、いわゆる "コールバック地獄" に陥りやすく、コードの可読性が低下することがあります。

`async/await` を使う場合、`async` キーワードを関数の前につけることでその関数を非同期関数と宣言し、関数内で `await` キーワードを使って非同期処理の完了を待ちます。この方法で書かれたコードは、非同期処理が含まれているにも関わらず、同期処理のように直列に実行されるように見えるため、理解しやすくなります。

例えば、複数のAPIからデータを順番に取得する場合を考えてみましょう。

`.then()` を使った例

fetch(url1)
  .then(response => response.json())
  .then(data1 => {
    console.log(data1);
    return fetch(url2);
  })
  .then(response => response.json())
  .then(data2 => {
    console.log(data2);
    // さらに処理...
  })
  .catch(error => console.error("エラーが発生しました", error));

`async/await` を使った例

async function fetchData() {
  try {
    const response1 = await fetch(url1);
    const data1 = await response1.json();
    console.log(data1);

    const response2 = await fetch(url2);
    const data2 = await response2.json();
    console.log(data2);

    // さらに処理...
  } catch (error) {
    console.error("エラーが発生しました", error);
  }
}

`async/await` を使った方が、コードが直線的で読みやすく、エラーハンドリングも簡潔に書けるため、複雑な非同期処理を扱う場合に特に有効です。

（asyncとawaitがこんなに便利だったとは・・。すまぬ。気づかなかった・・。🫠）

JavaScriptの本

（このJavaScript本格入門は、2周くらいしたから、俺的に思い出あって好き。🥰）

CSSの本など

俺の出版した電子本

　俺も電子本で、HTML、CSS、JavaScriptの本を出版しておりますッ！　ご興味あれば、よろしくお願いいたしますッ！！

　それでは、最後まで読んでいただき、ありがとうございましたッ！！

よろしくお願いしますッ！