はじめに

JavaScriptでは、並行処理がデフォルトです。処理が終わるまで待たずに次の処理を行うことができます。

console.log('start')

setTimeout(() => {
  console.log('end')
}, 1000)

console.log('middle')

Promise

JavaScriptでは、非同期処理の結果を受け取るためにPromiseというオブジェクトを使うことができます。
これによって逐次実行を行います。

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

promise.then((value) => {
  console.log(value)
})

Promiseオブジェクトの書き方

const promise = new Promise((resolve, reject) => {
  // ここで非同期処理を行う
  // 成功したらresolve()を呼び出す
  // 失敗したらreject()を呼び出す
});

Promiseオブジェクトの状態

pending: 初期状態
fulfilled: resolve()が呼ばれた状態
rejected: reject()が呼ばれた状態

Promiseオブジェクトの状態の確認

promise.then(
  () => {
    // 成功したら呼ばれる
  },
  () => {
    // 失敗したら呼ばれる
  }
);

Promiseオブジェクトのcatchメソッド

resolve()でもreject()でも呼ばれます。定義した関数内でthrowが行われたときに行う処理を定義します。

promise.catch(() => {
  // 例外が出たら呼ばれる
});

Promiseオブジェクトのfinallyメソッド

promise.finally(() => {
  // 成功しても失敗しても呼ばれる
});

例

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const num = Math.random();
    if (num < 0.5) {
      resolve(num);
    } else {
      reject(num);
    }
  }, 1000);
});

promise
  .then(
    (num) => {
      console.log('成功', num);
    },
    (num) => {
      console.log('失敗', num);
    }
  )
  .catch((num) => {
    console.log('失敗', num);
  })
  .finally(() => {
    console.log('終了');
  });

結果

成功 0.15591197693529923
終了

Promiseチェーン

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    // 四捨五入、小数点以下を切り捨て
    const num = Math.random() * 10 | 0;

    if (num < 5) {
      resolve(num);
    } else {
      reject(num);
    }
  }, 1000);
});

promise
  .then((num) => {
    console.log('1 成功', num);
    return num * 2;
  })
  .then((num) => {
    console.log('2 成功', num);
    return num * 2;
  })
  .then((num) => {
    console.log('3 成功', num);
  })
  .catch((num) => {
    console.log('失敗', num);
  })
  .finally(() => {
    console.log('終了');
  });

結果

1 成功 3
2 成功 6
3 成功 12
終了

Promiseオブジェクトのallメソッド

Promiseの配列を受け取り、全てのPromiseが成功したら成功となるPromiseを返します。

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

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('promise2');
  }, 2000);
});

Promise.all([promise1, promise2]).then((values) => {
  console.log(values);
});

結果

["promise1", "promise2"]

asyncとawait

Promiseのシンタックスシュガーです。
asyncはasynchronous(非同期的)の略で、非同期処理であることを示します。awaitは非同期処理が終わるまで待つことを示します。

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

promise.then((value) => {
  console.log(value)
})

上記のコードをasyncとawaitで書くと以下のようになります。


const asyncFunc = async () => {
  const value = await promise
  console.log(value)
}

asyncFunc()

async関数の書き方

async function キーワードは、式の中で async 関数を定義するために使用できます。

const asyncFunc = async () => {
  // ここで非同期処理を行う
};

async function asyncFunc() {
  // ここで非同期処理を行う
}

async関数の戻り値

async関数はPromiseオブジェクトを返します。async関数の戻り値はPromiseオブジェクトのthenメソッドの引数であるresolveの引数になります。

const asyncFunc = async () => {
  return 'end'
}

asyncFunc().then(value => {
  console.log(value)
})

await演算子

await 演算子はプロミス (Promise) を待つために使用します。通常の JavaScript コードで、 async function の内部でのみ使用することができます。によって Promise が返されるのを待機するために使用します。

const value = await promise;

参考