JavaScript:PromiseとAsync/Awaitとは?

目次

JavaScript:PromiseとAsync/Awaitとは?

JavaScriptにおけるPromiseとAsync/Awaitは、非同期処理をより効果的かつ可読性が高い形で扱うための概念です。これらを理解することで、コードの複雑さを軽減し、非同期処理を直感的に記述できるようになります。

Promiseの基本

Promiseは非同期処理が成功したか、あるいは失敗したかを表現するオブジェクトです。Promiseは以下の状態を持ちます。

  • Pending(保留中): 非同期処理が実行されている最中の状態。
  • Fulfilled(成功): 非同期処理が成功した状態。結果が利用可能。
  • Rejected(失敗): 非同期処理が失敗した状態。エラーが発生。

Promiseの基本的な構文は以下の通りです。

const myPromise = new Promise((resolve, reject) => {
    // 非同期処理が成功した場合
    // resolve(結果);

    // 非同期処理が失敗した場合
    // reject(エラー情報);
});

// Promiseの利用
myPromise
    .then(result => {
        // 非同期処理が成功した場合の処理
        console.log(result);
    })
    .catch(error => {
        // 非同期処理が失敗した場合の処理
        console.error(error);
    });

Async/Awaitの基本

Async/AwaitはPromiseをベースにした非同期処理の新しい構文です。これにより、非同期のコードを同期的に書くことができます。Async関数内でAwait式を使用することで、Promiseの完了を待ちながらコードを進めることができます。

// 非同期処理を含む関数をAsync関数として宣言
async function myAsyncFunction() {
    try {
        // 非同期処理をAwaitで待つ
        const result = await myPromise;

        // 非同期処理が成功した場合の処理
        console.log(result);
    } catch (error) {
        // 非同期処理が失敗した場合の処理
        console.error(error);
    }
}

// Async関数の呼び出し
myAsyncFunction();

PromiseとAsync/Awaitのメリット

  1. 可読性向上: コールバックヘル(ネストが深いコールバック関数)を回避し、非同期処理をシンプルで理解しやすい形で記述できます。
  2. エラーハンドリング: .catch メソッドを使ったエラーハンドリングが直感的であり、エラーの発生箇所が分かりやすいです。また、Async/Awaitでは通常のtry-catch構文が使えます。
  3. 同時に複数の非同期処理: 複数の非同期処理が同時に行われている場合でも、それらが完了するまで待つことができます。

Promiseチェーン

Promiseは .then メソッドによってチェーンさせることができます。これにより、複数の非同期処理を順次実行できます。

myPromise
    .then(result => {
        console.log(result);
        return anotherPromise; // 別のPromiseを返すことも可能
    })
    .then(anotherResult => {
        console.log(anotherResult);
    })
    .catch(error => {
        console.error(error);
    });

Async/Awaitの非同期関数

Async関数は非同期処理を包括するための便利な機能で、非同期の処理を同期的に書くことができます。

async function fetchData() {
    try {
        const result1 = await fetch('https://api.example.com/data1');
        const data1 = await result1.json();

        const result2 = await fetch(`https://api.example.com/data2/${data1.id}`);
        const data2 = await result2.json();

        console.log(data2);
    } catch (error) {
        console.error('Error:', error);
    }
}

fetchData();

総括

PromiseとAsync/Awaitは、非同期処理を効果的に扱うためのモダンな手法です。これらを理解し活用することで、コードの可読性が向上し、エラーハンドリングが簡潔になります。初心者がこれらの概念をマスターすることは、JavaScriptにおいて高度な開発スキルの一環となります。

目次