Articles
TypeScript入門
TypeScriptにおけるasync/await

TypeScriptにおけるasync/await

この記事ではTypeScriptにおけるasync/awaitについて説明します。

YouTube Video

TypeScriptにおけるasync/await

TypeScriptにおけるasyncは、非同期処理を簡潔に記述するためのキーワードで、JavaScriptのasync/await構文と同様の動作をします。async関数は、Promiseを返す関数をより直感的に扱えるように設計されています。

async 関数の基本

asyncキーワードを使って宣言された関数は、常にPromiseを返します。以下はその基本的な例です。

1async function fetchData(): Promise<string> {
2    return "Data received";
3}
4
5fetchData().then((data) => console.log(data)); // "Data received"

この例では、async関数は常にPromiseを返すため、returnされた値は自動的にPromise.resolveされます。つまり、"Data received"はPromise<string>となり、非同期処理として扱われます。

await キーワード

awaitキーワードは、async関数内でしか使えません。これは、Promiseの結果が返ってくるまで関数の実行を一時停止し、待機する機能を提供します。

次の例では、fetchを使った非同期処理をasync/awaitで記述しています。

 1async function getUserData() {
 2    try {
 3        const response = await fetch("https://codesparklab.com/json/example.json");
 4        const data = await response.json();
 5        console.log(data);
 6    } catch (error) {
 7        console.error("Error fetching user data:", error);
 8    }
 9}
10
11getUserData();

この例では、awaitを使ってfetch関数が返すPromiseの完了を待ち、その結果を変数responseに代入します。さらに、response.json()の結果もawaitで待機します。

async/awaitのエラーハンドリング

非同期処理中に発生するエラーは、通常のtry...catch構文を使ってキャッチできます。awaitの部分でエラーが発生した場合、catchブロックでそのエラーを処理します。

 1async function fetchDataWithErrorHandling() {
 2    try {
 3        const response = await fetch('https://invalid.codesparklab.com/');
 4        if (!response.ok) {
 5            throw new Error(`HTTP error! status: ${response.status}`);
 6        }
 7        const data = await response.json();
 8        console.log(data);
 9    } catch (error) {
10        console.error("Fetch error:", error);
11    }
12}
13
14fetchDataWithErrorHandling();

上記の例では、awaitによってfetch関数の結果を待機しつつ、エラーが発生した場合にtry...catchでエラーを処理しています。

async/awaitの利点

  1. 直感的な非同期処理: async/awaitを使うことで、Promiseチェーン（thenやcatch）を使った場合よりもコードの流れが直感的で、同期処理のように記述できる。

  2. エラーハンドリングが簡単: try...catchを使うことで、非同期処理におけるエラーハンドリングがシンプルになります。Promiseチェーンを使うよりも読みやすいコードが書けます。

async 関数の戻り値

async関数は常にPromiseを返します。そのため、明示的にPromiseを返さなくても、asyncキーワードを使えば非同期処理が可能です。

1async function example() {
2    return 42;
3}
4
5example().then((result) => console.log(result)); // 42

上記のコードでは、42という同期的な値が返されていますが、async関数内であるため、自動的にPromise.resolve(42)に変換されます。

非同期関数の連続実行

複数の非同期関数を連続して実行する場合は、awaitを使ってその順序を制御できます。

 1async function fetchData(url: string): Promise<any> {
 2    try {
 3        const response = await fetch(url);
 4        return await response.json();
 5    } catch (error) {
 6        console.error("Error fetching user data:", error);
 7    }
 8}
 9
10async function fetchData1(): Promise<any> {
11    return await fetchData("https://codesparklab.com/json/example.json");
12}
13
14async function fetchData2(): Promise<any> {
15    return await fetchData("https://codesparklab.com/json/example2.json");
16}
17
18async function processData() {
19    const data1 = await fetchData1();
20    console.log(data1);
21
22    const data2 = await fetchData2();
23    console.log(data2);
24}
25
26processData();

この例では、fetchData1の完了を待ってからfetchData2を実行しています。これはPromiseチェーンを使った方法に比べてコードの可読性が高いです。

並列実行

非同期処理を並列で実行したい場合、Promise.allを使って同時に複数のPromiseを処理できます。

 1async function fetchData(url: string): Promise<any> {
 2    try {
 3        const response = await fetch(url);
 4        return await response.json();
 5    } catch (error) {
 6        console.error("Error fetching user data:", error);
 7    }
 8}
 9
10async function fetchData1(): Promise<any> {
11    return await fetchData("https://codesparklab.com/json/example.json");
12}
13
14async function fetchData2(): Promise<any> {
15    return await fetchData("https://codesparklab.com/json/example2.json");
16}
17
18async function fetchMultipleData() {
19    const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
20    console.log(data1);
21    console.log(data2);
22}
23
24fetchMultipleData();

この場合、fetchData1とfetchData2が同時に実行され、両方が解決されるのを待ってから処理を進めます。これにより、効率的に複数の非同期処理を行うことができます。

まとめ

  • async関数はPromiseを返し、awaitキーワードを使うことで非同期処理の結果を待機します。
  • try...catchを使うことで、非同期処理におけるエラーハンドリングが簡単になります。
  • Promise.allを使うことで、複数の非同期処理を並列に実行することが可能です。

async/awaitは非同期処理をよりシンプルに記述できるため、TypeScriptやJavaScriptで広く使用されています。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video

TypeScriptにおけるPromiseクラス