async / await とプロミスオブジェクト

プロミスオブジェクト

JavaScript で非同期的な処理を扱うために提供されている、 Promise API というものがあります。

Promise のインスタンスには、３つの状態があります。

pending: 処理待ち中。処理が終わると下の２つのいずれかに移行します。
fulfilled: 処理が成功した状態。
rejected: 処理が失敗した状態。

早速 Promise を作ってみましょう。

const promise = fetch("https://www.google.com");
console.log(promise);

$ bun run ./script1.ts
Promise { <pending> }

プロミスの基本メソッド

Promise が fulfilled になった後に実行するコードを登録するために、then メソッドを使います。

const promise = fetch("https://www.google.com");

promise.then((resp) => {
  console.log(resp);
});

$ bun run ./script2.ts
Response (7.48 KB) {
  ok: true,
  url: "http://www.google.com/",
  status: 200,
  statusText: "OK",
  headers: Headers { /* 省略 */ },
  redirected: false,
  bodyUsed: false,
}

Promise が rejected になった後に実行するコードを登録するために catch メソッドを使います。

const promise = fetch("https://not-exists.google.com");

promise.catch((err) => {
  console.log(err);
});

$ bun run ./script3.ts
error: Unable to connect. Is the computer able to access the url?
  path: "https://not-exists.google.com/",
 errno: 0,
  code: "ConnectionRefused"

Promise のコンストラクター

ここまでは、 Fetch API で作られた Promise オブジェクトに操作をしてきました。自分で Promise オブジェクトを作ることもできます。

const p1 = new Promise((resolve, _reject) => {
  resolve(1);
});
p1.then(console.log);

const p2 = Promise.resolve(2);
p2.then(console.log);

const p3 = Promise.reject(3);
p3.catch(console.log);

const { promise: p4, resolve } = Promise.withResolvers();
p4.then(console.log);
resolve(4);

$ bun run ./script4.ts
1
2
3
4

then や catch メソッドはそれぞれ新しいプロミスオブジェクトを返すので、複数繋げて非同期な処理の流れを記述することができます。

fetch("https://www.google.com")
  .then((resp) => {
    console.log("got status", resp.status);
    return resp.json(); // この Promise が Reject するので、
  })
  // この then は実行されない
  .then((json) => {
    console.log("got json", json);
  })
  .catch((err) => {
    console.log("got error", err);
  });

$ bun run ./script4.ts
got status 200
got error SyntaxError: Failed to parse JSON

`async` と `await`

さて、お待ちかねの async / await です。

async キーワードを関数の宣言時につけることで、関数の内部で await というキーワードが使えるようになります。

await キーワードは、 Promise オブジェクトのような then メソッドをもつオブジェクトの非同期な扱いを、同期関数と同じような書き方で書けるようにする糖衣構文 (Syntax Sugar) です。

async function main() {
  try {
    const res = await fetch("https://www.google.com");
    console.log("got status", res.status);
    const json = await res.json();
    console.log("got json", json);
    return "ok";
  } catch (err) {
    console.log("got error", err);
    return "error";
  }
}
main();

async をつけた関数はそれ自体が Promise を返します。

console.log(main());
// -> Promise { <pending> }
console.log(await main());
// -> "error"

await 自体にエラーハンドリングの仕組みは付属しないので、catch メソッドに代わるものとして try ~ catch を使います。

EcmaScript Modules を使う場合、トップレベルで await を使えるため、上のように main 関数を定義する必要もなくなります。

try {
  const res = await fetch("https://www.google.com");
  console.log("got status", res.status);
  const json = await res.json();
  console.log("got json", json);
} catch (err) {
  console.log("got error", err);
}

ESM の例

<script> タグの属性に type="module" とある
拡張子が .mjs, .mts である
package.json に "type": "module" とある
Bun ランタイムで実行される

演習

https://jsonplaceholder.typicode.com/todos にアクセスすると、適当な Todo を返してくれます。

Fetch API を使って、ここで返される Todo を title で部分一致検索するような非同期関数を作ってみましょう。

解答例

async function getTodos(titleLike: string): Promise<Todo[]> {
  const resp = await fetch("https://jsonplaceholder.typicode.com/todos");
  const todos: Todo[] = await resp.json();
  return todos.filter((todo) => todo.title.includes(titleLike));
}

console.log(await getTodos("fugiat"));
// [
//   {
//     userId: 1,
//     id: 3,
//     title: "fugiat veniam minus",
//     completed: false,
//   }, ...
// ]

async / await とプロミスオブジェクト

プロミスオブジェクト

プロミスの基本メソッド

async と await

演習

`async` と `await`