ホームページ  >  記事  >  ウェブフロントエンド  >  約束の原則

約束の原則

藏色散人
藏色散人オリジナル
2019-07-10 10:27:323740ブラウズ

約束の原則

#1. Promise アプリケーション シナリオ

#1 コールバック地獄を解決する

たとえば、次の非同期操作の入力パラメーターとしてデータの一部を非同期にリクエストする必要があることがよくあります

getData(function(a){  
    getMoreData(a, function(b){
        getMoreData(b, function(c){ 
            getMoreData(c, function(d){ 
                getMoreData(d, function(e){ 
                    ...
                });
            });
        });
    });
});

上記のコードは、複雑な場合でも、レイヤーごとにネストされており、非常に恐ろしいものであることがわかります。ロジックが追加されると判断すると、コードの可読性が非常に悪くなります。

ただし、promise を使用する場合:

function getData() {
    return new Promise(function (resolve, reject) {
        resolve(1);
    });
}
function getMoreData(arg) {
    return new Promise(function (resolve, reject) {
        resolve(arg + 10);
    });
}
getData().then(function (a) {
    console.log(a); // 1
    return getMoreData(a);
}).then(function (b) {
    console.log(b); // 11
})

上記のコードをより簡潔にしてください

getData()
.then(a => getMoreData(a))
.then(b => console.log(b));

2 Promise は、複数のリクエストが送信された後、特定のリクエストを取得または処理するために使用できます。結果

// 两个数据都回来之后再进行操作
let fs = require('fs');
fs.readFile('./1.txt', 'utf8', function (err, data) {
    console.log(data);
})
fs.readFile('./2.txt', 'utf8', function (err, data) {
    console.log(data);
})
使用promise的话就可以实现:
let fs = require('fs');
function read(url){
    return new Promise(function(resolve,reject){
        fs.readFile(url,'utf8',function(err,data){
            if(err)reject(err);
            resolve(data);
        })
    })
}
Promise.all([read('1.txt'),read('2.txt')]).then(data=>{
    console.log(data);
},err=>{
    console.log(err);
});

2. Promise 原則の実装

1. 最も単純な実装

上記のアプリケーション シナリオに基づいて、Promise は次のことができることがわかります。 3 つの状態があります。それぞれ、ペディング、履行、拒否です。

Pending Promise オブジェクト インスタンスが作成されたときの初期状態

Fulfilled は成功した状態として理解できます

Rejected は失敗した状態として理解できます

Promise の構築 インスタンスは関数を Promise コンストラクターに渡す必要があります。渡される関数には 2 つの仮パラメータが必要で、どちらも関数型パラメータです。それぞれ解決と拒否です。

Promise には then メソッドもあります。then メソッドは、Promise オブジェクトの状態が変化したときに実行される操作を指定するために使用されます。最初の関数 (onFulfilled) は解決時に実行され、2 番目の関数は解決時に実行されます。関数 (onRejected) は拒否されたときに実行されます。)

ステータスが解決に変更された場合、拒否に変更することはできません。また、その逆も同様です。

上記の説明に基づいて、このような約束を実装できます

function Promise(executor){ //executor执行器
    let self = this;
    self.status = 'pending'; //等待态
    self.value  = undefined; // 表示当前成功的值
    self.reason = undefined; // 表示是失败的值
    function resolve(value){ // 成功的方法
        if(self.status === 'pending'){
            self.status = 'resolved';
            self.value = value;
        }
    }
    function reject(reason){ //失败的方法
        if(self.status === 'pending'){
            self.status = 'rejected';
            self.reason = reason;
        }
    }
    executor(resolve,reject);
}
Promise.prototype.then = function(onFufiled,onRejected){
    let self = this;
    if(self.status === 'resolved'){
        onFufiled(self.value);
    }
    if(self.status === 'rejected'){
        onRejected(self.reason);
    }
}
module.exports = Promise;

以上が約束の原則の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。