Promiseの使い方を詳しく説明する（ES7を含む）

1年 ago
海斗, 葵
1 minute

Promiseは非同期処理を扱うための仕組みであり、コールバック地獄の問題を解決するために使用されます。その核心思想は、非同期処理をPromiseオブジェクトにラップし、チェーンを用いて非同期処理の結果を処理する方法です。

Promiseオブジェクトには、pending（処理中）、fulfilled（成功済み）、rejected（失敗済み）の3つの状態があります。Promiseオブジェクトの状態がfulfilledまたはrejectedになると、それに応じたコールバック関数が呼び出されます。

Promiseオブジェクトの基本的な使用方法は以下の通りです：

1. Promiseオブジェクトを作成する:

const promise = new Promise((resolve, reject) => {
    // 异步操作
    // 如果操作成功，调用resolve方法并传入结果
    // 如果操作失败，调用reject方法并传入错误信息
});

2. Promiseオブジェクトの結果を処理する。

promise
    .then(result => {
        // 处理成功的结果
    })
    .catch(error => {
        // 处理失败的结果
    });

3. Promiseオブジェクト内で他の非同期操作をネストすることができます。

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('success');
    }, 1000);
});

promise
    .then(result => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(result.toUpperCase());
            }, 1000);
        });
    })
    .then(result => {
        console.log(result); // SUCCESS
    })
    .catch(error => {
        console.error(error);
    });

ES7では、async/awaitキーワードが導入され、Promiseをより簡単に使用できるようになりました。asyncキーワードを使用して非同期関数を定義し、その中でawaitキーワードを使用して非同期操作の結果を待つことができます。

4. async/awaitの基本的な使い方：

async function getData() {
    try {
        const result1 = await asyncFunc1();
        const result2 = await asyncFunc2(result1);
        console.log(result2);
    } catch (error) {
        console.error(error);
    }
}

asyncFunc1とasyncFunc2は、Promiseオブジェクトを返す非同期関数です。

async/awaitを使うと、非同期コードを同期コードのように見せることができ、可読性が向上します。ただし、awaitはasync関数内でのみ使用できることに注意してください。

bannerAds