Apply your JS skills to key Mozilla projects as an MDN Fellow! http://mzl.la/MDNFellowship

mozilla
Your Search Results

    Promise

    これは実験段階の機能です。
    この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。

    Promise インターフェースは作成時点では分からなくてもよい値へのプロキシです。プロミスを用いることで、非同期アクションの成功や失敗に対するハンドラを関連付けることができます。これにより、非同期メソッドは、最終的な値を返すのではなく、未来のある時点で値を持つプロミスを返すことで、同期メソッドと同じように値を返すことができるようになります。

    プロミスは何らかの値をもって成功、もしくは何らかの理由をもって失敗となることができます。そのどちらとなっても、then メソッドによって関連付けられたハンドラが呼ばれます。

    Promise.prototype.then メソッドと Promise.prototype.catch メソッドはプロミス値を返すので、メソッドチェインによって合成することができます。

    メソッド

    Promise.prototype.then(onFulfilled, onRejected)
    プロミスに成功と失敗に対するハンドラを追加し、呼ばれたハンドラの返り値によって解決される新しいプロミスを返します。
    Promise.prototype.catch(onRejected)
    プロミスに失敗に対するハンドラを追加し、プロミスが成功すればその値、失敗すればハンドラの返り値によって解決される新しいプロミスを返します。

    静的メソッド

    Promise.resolve(value)
    与えられた値で成功となる Promise オブジェクトを返します。もし値が thenable (then メソッドを持っているオブジェクト) ならば、返されるプロミスはその thenable に従い、その結果を採用します。そうでなければ、返されるプロミスは与えられた値で成功します。
    Promise.reject(reason)
    与えられた理由で失敗となる Promise オブジェクトを返します。
    Promise.all(iterable)
    iterable 中の全てのプロミスが成功したときに成功するプロミスを返します。結果は全てのプロミスから得られた値の配列として渡されます。iterable 中にプロミスでないものが渡された時は、Promise.cast で変換されます。渡されたプロミスの内いずれかが失敗となれば、直ちに失敗したプロミスの結果をもって失敗となり、他のプロミスの結果は無視されます。
    var p = new Promise(function(resolve, reject) { resolve(3); });
    Promise.all([true, p]).then(function(values) {
      // values == [ true, 3 ]
    });
    Promise.race(iterable)
    iterable 中のプロミスの内、最初に完了 (成功または失敗) したプロミスによって成功または失敗するプロミスを返します。
    var p1 = new Promise(function(resolve, reject) { setTimeout(resolve, 500, "one"); });
    var p2 = new Promise(function(resolve, reject) { setTimeout(resolve, 100, "two"); });
    
    Promise.race([p1, p2]).then(function(value) {
      // value === "two"
    });
    
    var p3 = new Promise(function(resolve, reject) { setTimeout(resolve, 100, "three"); });
    var p4 = new Promise(function(resolve, reject) { setTimeout(reject, 500, "four"); });
    
    Promise.race([p3, p4]).then(function(value) {
      // value === "three"               
    }, function(reason) {
      // 呼ばれない
    });
    
    var p5 = new Promise(function(resolve, reject) { setTimeout(resolve, 500, "five"); });
    var p6 = new Promise(function(resolve, reject) { setTimeout(reject, 100, "six"); });
    
    Promise.race([p5, p6]).then(function(value) {
      // 呼ばれない           
    }, function(reason) {
      // reason === "six"
    });
    

    以下の例は Promise の仕組みを示したものです。testPromise() メソッドは、 window.setTimeout を用いて、1秒から3秒のランダムな時間の後、メソッドがこれまでに呼ばれた回数で成功するプロミスを作成します。

    プロミスの成功は、p1.then で設定されたコールバックによって記録されます。この記録から、メソッドの同期処理部分が、プロミスによる非同期処理からどのように分離されているかがわかります。

    var promiseCount = 0;
    function testPromise() {
      var thisPromiseCount = ++promiseCount;
    
      var log = document.getElementById('log');
      log.insertAdjacentHTML('beforeend', thisPromiseCount + ') 開始 (<small>同期処理開始</small>)<br/>');
    
      var p1 = new Promise(               /* 新しいプロミスを作成: 1~3秒後に結果を返すことを約束します */
        function(resolve, reject) {       /* リゾルバ関数はプロミスの成功または失敗に応じて呼ばれます */
          log.insertAdjacentHTML('beforeend', thisPromiseCount + ') プロミス開始 (<small>非同期処理開始</small>)<br/>');
          window.setTimeout(              /* 非同期を作成するための一例です */
            function() {
              resolve(thisPromiseCount); /* 約束を果たしました! */
            }, Math.random() * 2000 + 1000);
        });
    
      p1.then(                            /* プロミスが成功した時に何をするかを定めます */
        function(val) {                   /* メッセージと値を記録します */
          log.insertAdjacentHTML('beforeend', val + ') プロミス成功 (<small>非同期処理終了</small>)<br/>');
        });
    
      log.insertAdjacentHTML('beforeend', thisPromiseCount + ') プロミスは作成されました (<small>同期処理終了</small>)<br/>');
    }

    仕様

    仕様 状態 コメント
    domenic/promises-unwrapping Draft 初期の作業ここで行われています
    ES6 Draft 最終的に正式な ES6 draft に移されます

    ブラウザ互換性

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    基本サポート 32 24.0 (24.0) (Future として)
    25.0 (25.0) (デフォルトでは無効 [1])
    29.0 (29.0)
    未サポート 19 未サポート
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
    基本サポート 未サポート 24.0 (24.0) (Future として)
    25.0 (25.0) (デフォルトでは無効 [1])
    29.0 (29.0)
    未サポート 未サポート 未サポート 32

    [1] Gecko 24 は Future という名前で Promise の実験的な実装を持っています。Gecko 25 で Promise に名称が変更されましたが、Promise を使用するための dom.promise.enabled フラグはデフォルトで無効になっています。Bug 918806 によって、Gecko 29 から Promise はデフォルトで有効になりました。

    関連リンク

    ドキュメントのタグと貢献者

    Contributors to this page: teoli, Susisu
    最終更新者: Susisu,