Promise (initial support) | Frontend Practical Guide

概要

Promise は非同期操作の最終的な完了（もしくは失敗）とその結果の値を表します。then/catch/finally メソッドでチェーンでき、Promise.all や Promise.race で複数の非同期処理を制御できます。

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`Promise`	32	12	29	8	32	8
`Promise.@@species` Promise[Symbol.species] アクセサープロパティは、プロミスのメソッドからの返値を構築するのに使用されるコンストラクターを返します。	51	79	48	10	51	10
`Promise.Promise` Promise コンストラクターは、主にまだプロミスに対応していない関数をラップするために使用します。	32	12	29	8	32	8
`Promise.all` Promise.all() は静的メソッドで、入力としてプロミスの集合の反復可能オブジェクトを取り、単一の Promise を返します。この返却されたプロミスは、入力されたプロミスがすべて履行されたとき（空のイテレーターが渡されたときを含む）、その履行された値の配列で、履行されます。入力されたプロミスのいずれかが拒否されると、その最初の拒否理由とともに拒否されます。	32	12	29	8	32	8
`Promise.catch` catch() は Promise インスタンスのメソッドで、プロミスが拒否されたときに呼び出される関数をスケジュールします。これは即座に同等の Promise オブジェクトを返すので、他のプロミスのメソッドを連鎖して呼び出すことができます。これは Promise/then の省略形です。	32	12	29	8	32	8
`Promise.incumbent settings object tracking` 設定オブジェクトは、JavaScript コードの実行時に追加情報を提供する環境です。これには、レルムとモジュールマップに加え、オリジンなどの HTML 固有の情報が含まれます。既存の設定オブジェクトは、特定のユーザーコードにどれを使用するかをブラウザが認識していることを確認するために追跡されます。			50
`Promise.race` Promise.race() は静的メソッドで、入力としてプロミスの反復可能オブジェクトを受け取り、単一の Promise を返します。この返されたプロミスは、最初に決定したプロミスの最終的な状態で決定されます。	32	12	29	8	32	8
`Promise.reject` Promise.reject() は静的メソッドで、引数で与えられた理由で拒否された Promise オブジェクトを返します。	32	12	29	8	32	8
`Promise.resolve` Promise.resolve() は静的メソッドで、 Promise を与えられた値で「解決」させます。値がプロミスの場合は、そのプロミスが返されます。その値が Thenable であれば、Promise.resolve() は then() メソッドを、準備した 2 つのコールバックと共に呼び出します。それ以外の場合は、その値で履行するプロミスが返されます。	32	12	29	8	32	8
`Promise.then` then() は Promise インスタンスのメソッドであり、最大 2 つの引数として、この Promise が成功した場合と失敗した場合のコールバック関数を取ります。コールバックは、それが呼び出されたプロミス内に格納され、すぐに別の Promise オブジェクトを返値において返し、他のプロミスのメソッドに対する連鎖呼び出しを行うことができます。	32	12	29	8	32	8

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

基本構文

JAVASCRIPT

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

fetchData
  .then(result => console.log(result))
  .catch(error => console.error(error));

// Parallel execution using Promise.all
const [users, posts] = await Promise.all([
  fetch('/api/users').then(r => r.json()),
  fetch('/api/posts').then(r => r.json()),
]);

ライブデモ

Chaining asynchronous steps

Resolve one task after another and inspect the values that flow through the chain.

JavaScript

出力

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

Parallel work with Promise.all

Start multiple tasks together and wait until the slowest one finishes.

JavaScript

出力

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

実務での使いどころ

Promise (initial support) の活用

非同期処理の結果を表現するオブジェクト。コールバック地獄を回避し、直感的な非同期制御を可能にする。

注意点

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

参考リンク

Powered by web-features

概要