【ES6知識】Promiseオブジェクト

記事ディレクトリ

1.1 概要

Promise非同期操作の最終的な完了 (または失敗) とその結果値を表すために使用されるオブジェクト。これは、非同期プログラミングの解決策です (コールバック地獄の問題を解決できます)。

オブジェクトPromiseは、Promise の作成時にその値が必ずしも知られていないプロキシを表します。これにより、非同期操作の最終的な成功の戻り値または失敗の理由を、対応するハンドラーに関連付けることができます。これにより、非同期メソッドは同期メソッドと同様に値を返すことができます。非同期メソッドは最終値をすぐに返すのではなく、将来のある時点でユーザーに値を渡すという約束を返します。

Native JavaScriptScipt 事例集
 JavaScript + DOM 基本
 JavaScript 基礎から上級
 Canvas ゲーム開発

A はPromise次のいずれかの状態にある必要があります。

Pending : 受け入れも拒否もされていない初期ステータス。
Fulfilled : 操作が正常に完了したことを意味します。
Rejected : 操作が失敗したことを意味します。

Promise オブジェクトには、保留中から実行済みへ、および保留中から拒否への状態変化のみがあります。満たされて拒否される限り、ステータスはそれ以上変更されません。つまり、解決済み (確定済み) です。

Promise オブジェクトは作成されるとすぐに実行され、途中でキャンセルすることはできません。

およびこれらのメソッドを使用してPromise.prototype.then()、確定した Promise にさらなるアクションを関連付けることができます。Promise.prototype.catch()Promise.prototype.finally()

たとえば、.then()このメソッドには 2 つのパラメータが必要です。最初のパラメータはキャッシュされたステータスを処理するコールバック関数として使用され、2 番目のパラメータは拒否されたステータスを処理するコールバック関数として使用されます。各.then()メソッドは、新しく生成された Promise オブジェクトも返します。これは、次のように呼び出しのチェーンとして使用できます。

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('foo');
  }, 300);
});

myPromise
  .then(value => { return value + ' and bar'; })
  .then(value => { return value + ' and bar again'; })
  .then(value => { return value + ' and again'; })
  .then(value => { return value + ' and again'; })
  .then(value => { console.log(value) })
  .catch(err => { console.log(err) });

緊急の必要がない場合は、.catch()最後のステートメントでエラー処理を実行できます。これはより簡単です。拒否された Promise を途中で処理すると、エラーをすぐに処理する必要がない限り、後続の Promise チェーン呼び出しに影響します。たとえば、チェーン呼び出しでエラーステータスを渡すために、ある種のエラーを外部にスローする必要があります。。

1.2 静的メソッド

Promise.all()とは、Promise.race()非同期操作を並行して実行するための 2 つのツールを組み合わせたものです。

Promise.all(iterable)このメソッドは新しい Promise オブジェクトを返し、すべての Promise オブジェクトが成功するか、いずれかの Promise が失敗するまで待機します。すべての Promise が成功した場合、イテラブル内のすべての Promise の戻り値を含む配列を成功コールバックの戻り値として使用します。順序は反復可能順序と一致します。イテラブル内のいずれかの Promise オブジェクトが失敗すると、Promise オブジェクトが失敗した理由に基づいて、新しい Promise は直ちに拒否されます。
Promise.race(iterable)Promise のステータスが確定に変わるまで待ちます。反復可能パラメータ内の子 Promise が成功または失敗すると、親 Promise は子 Promise の成功戻り値または失敗の詳細をパラメータとして直ちに使用し、親 Promise にバインドされた対応する処理関数を呼び出し、Promise オブジェクトを返します。

const p1 = getCmpData("basicSetting");
var p2 = null;
if (that.isOnlineForm) {
	p2 = getCmpData("formDesign");
} else {
	p2 = new Promise(function (resolve, reject) {
        resolve(null);
    });
}
const p3 = getCmpData("processDesign");

Promise.all([p1, p2, p3])
.then((res) => {
  const param = {};
  this.sendToServer(param); //接口调用传参
})
.catch((err) => {//错误信息处理
  err.target && (this.activeStep = err.target);
  err.msg && this.$message.warning(err.msg);
});

Promise.allSettled(iterable)すべての約束が完了する (各約束が履行または拒否される) まで待ちます。すべての Promise が完了した後に実行される Promise と、各 Promise の結果に対応するオブジェクトの配列を返します。
Promise.any(iterable)Promise オブジェクトのコレクションを受け取り、いずれかの Promise が成功すると、成功した Promise の値が返されます。

Promise.resolve()およびは、Promise.reject()解決または拒否された Promise を手動で作成するためのショートカットメソッドです。時には役に立つこともあります。

Promise.reject(reason)ステータスが拒否されたオブジェクトを返しPromise、指定された失敗情報を対応するハンドラー関数に渡します。
Promise.resolve(value)指定された値によって状態が決定されるオブジェクトを返しますPromise。値が thenable (つまり、thenメソッドを持つオブジェクト) の場合、返される Promise オブジェクトの最終ステータスは then メソッドの実行結果によって決まります。それ以外の場合、返された Promise オブジェクトのステータスは満たされ、値はは、対応する then メソッドに渡されます。

[func1, func2, func3].reduce((p, f) => p.then(f), Promise.resolve())
.then(result3 => { /* use result3 */ });

一般に、値が Promise オブジェクトであるかどうかがわからない場合は、Promise.resolve(value)値を Promise オブジェクトとして使用できるように、を使用して Promise オブジェクトを返します。

1.3 インスタンスメソッド

Promise.prototype.then()Promise の履行ステータスと拒否ステータスのコールバック関数を追加します。これにより、コールバック関数の戻り値で Promise が履行されます。履行または拒否のステータスが処理されない場合 (たとえば、onFulfilledがonRejected関数ではない場合)、Promise が確定した時点の値が返されます。
Promise.prototype.catch()拒否されたコールバック関数を Promise に追加し、新しい Promise を返します。コールバック関数が呼び出された場合はその戻り値が受け入れられ、それ以外の場合は元の Promise の値が受け入れられます。
Promise.prototype.finally()Promise にコールバック関数を追加し、新しい Promise を返します。この新しい約束は、最初の約束が果たされたときに果たされます。渡されたコールバック関数は、元の Promise が完了したときに (受け入れられるか拒否されるかに関係なく) 呼び出されます。

1.4 約束拒否イベント

Promise が拒否されると、以下で説明する 2 つのイベントのいずれかがグローバルスコープに送出されます (通常、windowWeb ワーカーまたはWorker他のワーカーベースのインターフェイスで使用される場合)。2つのイベントは以下の通りです。

rejectionhandledrejectこのイベントは、Promise が拒否されたとき、および関数が拒否を処理した後に送出されます。
unhandledrejectionrejectこのイベントは、Promise が拒否されたが、拒否を処理する関数が提供されていない場合に送出されます。

上記の 2 つのケースでは、PromiseRejectionEventイベントには 2 つの属性があります。1 つはpromise拒否された Promise を指す属性であり、もう 1 つはreason(en-US)属性であり、Promise が拒否された理由を説明するために使用されます。

window.addEventListener("unhandledrejection", event => {
  /* 你可以在这里添加一些代码，以便检查
     event.promise 中的 promise 和
     event.reason 中的 rejection 原因 */

  event.preventDefault();
}, false);