Promiseとasync/await

「すぐには返ってこない処理」とは

プログラムには、結果がその場ですぐ出る処理と、少し待たないと結果が出ない処理があります。1+1のような計算は一瞬で終わりますが、外部のサーバーにデータを取りに行く処理は、返事が返ってくるまで数百ミリ秒かかることもあります。この「時間がかかる処理」を、待っている間もプログラム全体を止めずに扱う仕組みを async(非同期)と呼びます。

非同期処理の結果を表す入れ物が Promise(プロミス)です。Promiseは「今はまだ値がないけれど、あとで成功か失敗のどちらかで返す」という約束を表す箱だと考えてください。

async/awaitで読みやすく書く

Promiseをそのまま扱うと書き方が入り組みがちです。そこで async と await という書き方を使うと、非同期の処理を「上から下に順番に読める」形で書けます。await は「この処理が終わるまで待ってから次に進む」という意味です。

// async をつけた関数の中でだけ await が使える
async function greet(): Promise<string> {
  // wait は 1 秒待つだけの Promise を返すと考える
  await wait(1000);
  return "こんにちは";
}

// 1秒待つ処理を Promise で表した例
function wait(ms: number): Promise<void> {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

awaitすると中身が取り出せる

const message = greet();
// message は Promise<string> のまま
// 文字列として使おうとすると意図とズレる
console.log(message.length); // 期待した長さにならない

const message = await greet();
// message は string になっている
console.log(message.length); // 文字数が取れる

async関数の戻り値は必ずPromiseに包まれます。上の悪い例のように await を忘れると、中身(string)ではなく箱(Promise<string>)のまま扱ってしまい、思った動きになりません。TypeScriptを使っていれば、型が Promise<string> と表示されるので「まだ箱のままだ」と気づけます。

• 非同期 = 時間がかかる処理を、全体を止めずに扱う仕組み
• Promise = あとで成功か失敗で返る値の箱
• async 関数の戻り値は必ず Promise に包まれる
• await でその箱の中身を取り出せる