簡単な約束を段階的に実行する方法を教えます

ステップ1: フレームワークを構築する

1. まず、ここに promise 関数本体を配置し、次に、resolve および deny 実行関数を追加する必要があります。

  関数 Promise(エグゼコター) {}

2. 元のPromiseにはthenとcatchという2つの主なメソッドがあるので、thenとcatchをPromiseのプロトタイプに追加する必要があります。

  Promise.prototype.then = 関数 (onResolved、onRejected) {}
  Promise.prototype.catch = 関数 (onRejected) {}

3. Promise に、resolve、reject、all、race などの一般的なメソッドをいくつか追加します。

解決: 指定された結果を持つPromiseオブジェクトを返します

  Promise.resolve = 関数 (値) { }

拒否: 失敗ステータスを返すメソッド

  Promise.reject = 関数 (値) { }

all: プロミス オブジェクトを返します。この状態は、すべてのプロミスが返された場合にのみ成功したと見なされます。

  Promise.all = 関数 (値) { }

race: 最初に返されたオブジェクトによって状態が決定される Promise オブジェクトを返します。レース内のどの関数が最初に実行されても、最初の値が直接返され、他の関数は引き続き実行されます。

  Promise.race = 関数 (値) { }

4. mypromiseの世界宣言

  window.Promise = プロミス

5. 上記のすべての内容をラップする自己実行関数を作成する

(関数 (ウィンドウ) {

})()

ステップ2 構築されたPromiseフレームワークに入力する

1. 関数Promise()を記入する

(1) let self = this は関数内の this を修正します。この this は後で大きな役割を果たします。

（2）self.status = 'pending'はPromise関数本体に基本ステータス'pending'を追加します。

（3）self.data = undefinedは、resolveによって返された結果を格納するためのデータソースを作成します。

(4) self.callbacks = [] はプロミス内のすべてのコールバックを保存するための配列を作成します。

2. 関数resolve()に記入する

(1) if (self.status !== 'pending') { return } 現在の受信プロセスのステータスが保留中かどうかを確認します。保留中の場合は、次の操作を続行します。保留中でない場合は、直接戻ります。

promise には、保留中、解決済み、拒否の 3 つの状態があります。これら 3 つの状態はスイッチ変数です。状態が保留中から他の状態に変わると、変更できません。

（2）self.status = 'resolved'はプロセスのステータスを解決済みに変更します。

（3）self.data = valueは、その後のコールバックで使用される値を保存します。

（４）最も重要な実行関数部分を配置します。sele.data内に実行すべきコールバック関数がある場合は、すぐに非同期で実行します。

    （自己コールバックの長さ＞0）の場合{
      タイムアウトを設定する(() => {
        self.callbacks.forEach(callbackObj => {
          callbackObj.onResolved(値)
        })
      }, 0)
    }

3. 関数reject()を埋め込む

（１）resolve関数と同じ、ここでは省略

4. 実行メソッドを入力する

プロミス本体の実行中にエラーが発生した場合、エラー メッセージが catch 関数によってキャプチャされ、関数にジャンプして、reject ステートメントを個別に実行します。

     試す {
       実行者(解決、拒否)
     } キャッチ（エラー）{
       拒否(エラー)
     }

5. .then関数に入力する

まず、着信プロセスの状態を区別する必要があります。保留中の場合は、コールバック関数を保存します。保留中でない場合は、実行すべきことを実行します。

（1）if (self.status === 'pending') 現在のステータスが保留中の場合、それを保存します

    自己.コールバック.プッシュ({
      onResolved() { onResolved(self.data) },
      onRejected() { onRejected(self.data) }
    })

(2) else if (self.status === 'resolved') ステータスが解決されている場合

楽しく実行してみましょう。

    タイムアウトを設定する(() => {
      自己データ解決時
    }, 0)

しかし、resolve が実行されていないのに状態が変わった状態があります。resolve は実行できず、代わりに declined を実行します。

   それ以外{
     タイムアウトを設定する(() => {
       拒否された場合(self.data)
     }, 0)
   }

象を冷蔵庫に入れるのと同じくらい「簡単」な2つのステップを経て、私たちはシンプルなPromiseを実装しました。

簡単ですよね？友達を呼んで一緒に試してみましょう！

要約する

シンプルなプロミスの実装に関するこの記事はこれで終わりです。シンプルなプロミスの実装の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。