JavaScript Promise実装(一)

3419 ワード

ページの先

フロントエンド開発を行う際には、jQuery、Nodeを使用したり、ベースにしたりするPromiseオブジェクトタイプに触れることが多いと思います.jsやES 6などの開発過程でよく見られる.Promiseオブジェクトは通常、遅延および非同期の計算を設定するために使用されます.たとえば、AJAXリクエストが送信された後、Promiseオブジェクトを返すと、このオブジェクトで次のことを追加することができます.これらのことは、AJAXリクエストが終了するまで待ってから実行されます.すぐには実行されません.したがって、Promiseは通常、以下の特性を有するシーンで使用される.

私たちは1つの操作が結果をもたらすと予想していますが、この操作自体には一定の時間がかかるため、この操作は現在完了していない可能性があります.

操作が完了して成功すると、通知があり、演算結果が添付される可能性があります.

この操作が失敗した場合、通知があり、エラーメッセージが添付される可能性があります.

操作が完了すると、成功するかどうかにかかわらず、元の実行中または他のステータスに戻ることはありません.

ES 6では、以下のように使用できます.

var promise = new Promise(
    function (resolve, reject) {
        //       。
        setTimeout(function () {
            //           。
            var now = new Date();
            if (now.getSeconds() % 2 === 0)
                //        ，     。
                resolve(now);
            else
                //        ，     。
                reject(now);
        }, 1000);
    });
 
//     。
promise.then(
    function (value) {
        //       。
        console.debug("Success", value);
    },
    function (reasone) {
        //       。
        console.debug("Error", reasone);
    });

このコードでは、Promiseオブジェクトが作成され、複数のグループを登録できるコールバックのセットが登録され、成功したときと失敗したときに指定したイベントがトリガーされます.Promiseオブジェクトに登録されているビジネスロジックは、単純に1秒後に現在の時間状況に基づいて、成功または失敗した論理ブランチに入ることを決定し、結果またはエラー情報をパラメータとして返し、さっき述べたコールバックをトリガーします.具体的には、このコードを実行すると、以下の手順に従います.

まず、Promiseオブジェクトが作成され、その中の入力パラメータは関数であり、このPromiseの主なビジネスロジックとして機能します.

は、入力関数を実行し、成功したときと失敗したときのトリガの2つのパラメータを入力します.

Promise実行終了後のイベント登録.複数のイベントのグループを登録できます.各グループには、1つの成功と1つの失敗、または成功または失敗の1つが含まれます.これらのイベントグループは、前後順に実行されます.

プライマリ・ビジネス・ロジックの非同期コールバックが実行される可能性があります.

プライマリ・ビジネス・ロジックは、現在のステータスを成功または失敗に切り替え、クラス登録のイベントを自動的に呼び出す可能性があります.

は、成功または失敗したイベントを呼び出すと、登録の順序で実行されます.成功したイベントの実行中にエラーが発生した場合、対応する失敗したイベントが呼び出されます(存在する場合).

成功時間または失敗時間に戻り値がある場合、次のPromiseオブジェクトが自動的に作成され、遅延非同期プロセスと対応する結果が1つずつ伝達されます.

こんなにたくさん言って、私はどのようにこのクラスを実現するかを研究し始めます.
これがクラスである以上、前述の要件を考慮して、どのような方法と属性を備えるべきか、構造関数がどのようなものかを見てみましょう.

まず、構造関数が必要です.演算量が大きいか、待ち時間が長い関数である可能性がある関数、すなわち、必要な主なビジネスロジックを入力する必要があります.この関数は、成功と失敗のトリガの2つのパラメータをサポートする必要があります.各トリガは、実際には関数であり、オプションの演算結果やエラー情報を受け入れることができます.

の次に、成功および失敗したコールバックを登録するためのメンバーメソッドも必要です.この方法は,成功後のコールバックと失敗後のコールバックの2つのパラメータを提供する必要がある.これらのコールバックはもちろん方法であり、成功時の演算結果や失敗時のエラー情報であるオプションのパラメータの入力をサポートします.同時に、これらのコールバックは結果を返すこともできます.この結果は、次のPromiseオブジェクトを自動的に生成し、後で転送を続行するために使用されます.

そこで、以下のコードを得ました.基本的な説明から容易にするために、以下のコードはES 5で書かれています.

var Promise = function (executor) {
    // ToDo: Implement it.
};
Promise.prototype.then = function (onfulfilled, onrejected) {
    return Promise(function (resolve, reject) {
        // ToDo: Implement it.
    });
};
Promise.prototype.catch(onrejected) {
    return this.then(null, onrejected);
}

明らかに、いくつかの情報を格納するために変数またはフィールドが必要です.

ステータス情報(進行中、成功、失敗など).

成功時の演算結果または失敗時のエラー情報.

したがって、コンストラクション関数でステータス情報を初期化する必要があります.

this._state = null;

この値はブール値で、trueの場合は成功、falseの場合は失敗、デフォルトはnullの場合は実行中です.成功または失敗の結果は、後でthis._を使用する予定です.valueが格納します.
今、私たちは大体インタフェースを作成しました.次の実装は、後続の文章を見てみましょう.
【未完待機】
文章の種類と複雑さ:Webフロントエンドの開発が段階的に進んでいる.
節選翻訳はMSDN博文JavaScript Promiseから、内容が調整された.
http://blogs.msdn.com/b/kingcean/archive/2016/03/25/promise-in-web.aspx

jQuery APIの.attr(attributeName)

jQuery $.each遍歴オブジェクト、配列使用例