今回はasync/awaitの使い方の基本について解説します。
async/awaitってなに？
async/awaitは簡単にいうと、とっても簡潔で読みやすい非同期処理の書き方です。
JavaScriptには、非同期処理を扱うための方法がいくつかあるのですが、
その中でもES2017からの導入された非同期処理の書き方、async/awaitというのが優れものなんです。
簡単な使用例
以下に簡単な使用例をサンプルでご用意しました。こちらを使ってみていきましょう。
ここでは、getData()という関数が、外部のAPIからデータを取得する非同期処理を含むと仮定しています。
async/awaitを使って、その非同期処理を書くと以下のような感じです。
async function fetchData() {
try {
const data = await getData();
console.log(data);
} catch (error) {
console.log(error);
}
}
ここでは３つの言葉、「async」「await」「try/catch」というワードに着目しましょう。
ひとつひとつの意味を説明します。
asyncとは？
asyncというのは、その関数の前に書く事で、「今からこれが非同期で処理されまっせ」ということを示すワードです。
まぁ難しいことは置いといて、つまり、この関数は非同期処理を含む可能性があるよ～てことをを示しています。
awaitとは？
awaitは、使用することで非同期処理の完了または失敗がわかるまで、JavaScriptの実行を一時停止することができます。
↑の例でいうと、fetchData関数の中で、awaitキーワードを使用することで処理結果が出るまで待機することができるようになっています。
try/catchとは？
try/catch構文は、コードブロックを実行する際に発生する可能性のあるエラーをキャッチし、エラー処理を行うためのものです。
この非同期処理がエラーをスローした場合には、catchブロック内でエラーを処理します。
エラーがスローされなかった場合には、tryブロック内のコードが実行されます。
上記を踏まえてもう一度
つまりこのコードでは、
async function fetchData() {
try {
const data = await getData();
console.log(data);
} catch (error) {
console.log(error);
}
}fetchData()関数を宣言するときに同時にasyncをつけることで非同期処理であることを示していて、
getData()関数の処理が解決されるまでawaitで待機させています。
try/catchはgetData()関数の処理がうまくいくかどうかをみて、エラーの場合はエラーメッセージを表示するという構造になってます。
まとめ
async/awaitは、これが導入されるまで使われていたPromiseの上位互換とも言われていて、昔よりも非同期処理を書きやすくなった、JS使いたちの中では誰もが望んだ機能です。
非常に色々なところで活用されていますし、非同期処理はフロントエンドとしては避けられない部分なので是非覚えておきましょう。
次はPokeAPIを使って、async/awaitを実践的に使って学んでみましょう！
ちなみにPromiseとは
async/awaitは実はPromiseをベースに構築されており、async関数は内部的にはPromiseを返します。
Promiseはthenやcatchメソッドを使って処理しますが、少し読みづらい部分がありました。
下に処理内容の同じコードを「Promise」と「async/await」の２パターンで紹介します。
・Promiseの場合
// Promiseを使用した場合
function fetchData() {
return fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log(data);
return fetch('https://api.example.com/more-data');
})
.then(response => response.json())
.then(moreData => {
console.log(moreData);
})
.catch(error => console.log(error));
}
fetchData();
・async/awaitの場合
// async/awaitを使用した場合
async function fetchData() {
try {
const response1 = await fetch('https://api.example.com/data');
const data = await response1.json();
console.log(data);
const response2 = await fetch('https://api.example.com/more-data');
const moreData = await response2.json();
console.log(moreData);
} catch (error) {
console.log(error);
}
}
fetchData();Promiseは.thenメソッドでコールバック関数を定義してつないでいくので少し見づらいですが、
async/awaitを使用すると単純化されて見やすくなることがわかります。
長くなりましたが今回はこんな感じで。
なるほ、まずは使ってみるわ
