【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の本を出版しておりますッ! ご興味あれば、よろしくお願いいたしますッ!!
それでは、最後まで読んでいただき、ありがとうございましたッ!!
よろしくお願いしますッ!