Async functions | Frontend Practical Guide

概要

async/await は Promise を基盤とした糖衣構文です。async 関数は常に Promise を返し、await キーワードで Promise の解決を待機できます。try/catch でのエラーハンドリングも自然に書けます。

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`AsyncFunction`	55	15	52	10.1	55	10.3
`AsyncFunction.AsyncFunction` AsyncFunction() コンストラクターは AsyncFunction オブジェクトを生成します。	55	15	52	10.1	55	10.3
その他
`javascript.operators.async_function` async function キーワードは、式の中で非同期関数を定義するために使用できます。	55	15	52	10.1	55	10.3
`javascript.operators.await` await 演算子はプロミス (Promise) を待ち、履行値を取得するために使用します。非同期関数の中、またはモジュールの最上位でのみ使用することができます。	55	14	52	10.1	55	10.3
`javascript.statements.async_function` async function 宣言は、与えられた名前で新しい非同期関数のbindingを作成します。その関数の本体の中では await キーワードを使うことができ、ます。async および await キーワードを使用することで、プロミスベースの非同期の動作を、プロミスチェーンを明示的に構成する必要なく、よりすっきりとした方法で書くことができます。	55	15	52	10.1	55	10.3

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT

async function fetchUserData(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    if (!response.ok) throw new Error('Failed to retrieve');
    const user = await response.json();
    return user;
  } catch (error) {
    console.error('Error:', error.message);
  }
}

// Top-level await (ES modules)
const data = await fetchUserData(1);

ライブデモ

Sequential async flow

Await three steps in order and compare the output with the order written in the source.

JavaScript

出力

「実行」ボタンを押してください

try/catch around awaited work

Handle successful and failing Promises with one control-flow structure.

JavaScript

出力

「実行」ボタンを押してください

実務での使いどころ

Async functions の活用

Promise ベースの非同期処理を同期的な書き方で記述できる構文。コードの可読性を大幅に向上させる。

注意点

特になし。すべての主要ブラウザで安定して動作する。

参考リンク

Powered by web-features

概要