ES6 新機能: 遅延オブジェクト Promise 組み込み JavaScript コードの詳細-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

ES6 新機能: 遅延オブジェクト Promise 組み込み JavaScript コードの詳細

黄舟

Mar 07, 2017 pm 02:26 PM

Promise の基本的な使い方:

Promise を使用すると、JS の非同期実行中にコールバック関数がネストするコールバック関数の問題を解決し、new を通じて関数実行プロセスをより簡潔に制御します。この関数には 2 つのパラメータが必要です。最初のパラメータは、関数の実行が成功した後に実行される関数 replace で、2 番目の関数は関数の実行が失敗した後に実行される関数です。コールバック関数を線形的に使用します。この関数には 4 つの層のコールバックがあります。

new Promise(function(resolve , reject) {
});

失敗したコールバックもカウントされると、さらに面倒になります。 Promise メソッドを使用する場合は、より読み取り習慣に沿った線形コードに変更できます。

fn("args", function(a) {
    fn1("foo", function(b) {
        fn2("bar", function(c) {
            fn3("baz", function(d) {
                alert("回调成功，获知的内容为："+a+b+c+d)
            })
        })
    })
})

これは、ajax によるデータの非同期取得の例です。 コールバック関数

を使用しました。

new Promise(function(resolve , reject) {
    resolve(1);
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve , reject) {
        resolve(2);
    });
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve , reject) {
        resolve(3);
    });
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve , reject) {
        resolve(4);
    });
}).then(function(val) {
    console.log(val);
});

ES6 には Promise が組み込まれているため、上記のコールバックを Promise メソッドに書き換えることができます。まず、ajax 関数は Promise オブジェクトの

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<script>
    var callback = function(res) {
        console.log(res);
    };
    var ajax = function(url, callback) {
        var r = new XMLHttpRequest();
        r.open("GET", url, true);
        r.onreadystatechange = function () {
            if (r.readyState != 4 || r.status != 200) return;
            var data = JSON.parse(r.responseText);
            callback(data);
        };
        r.send();
    };
    //执行请求：
    ajax("http://www.filltext.com?rows=10&f={firstName}", callback);
    //再做别的事情；
</script>
</body>
</html>

の 3 つの状態を返します。インスタンス化された各 Promise には、保留中 (待機中)、拒否済み (拒否済み)、解決済み (解決済み) の 3 つの状態があり、resolve() が実行されると、この Promise のステータスは Resolve になります。この場合、この Promise のステータスは拒否され、これらの状態は取り消し不能になります。

then メソッド: promise には 2 つのパラメーターが含まれます。 1 つは関数の成功コールバックです。2 つ目は関数の失敗コールバックです。

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <script>
        var callback = function(res) {
            console.log(res);
        };
        var ajax = function(url) {
            return new Promise(function(resolve, reject) {
                var r = new XMLHttpRequest();
                r.open("GET", url, true);
                r.onreadystatechange = function () {
                    if (r.readyState != 4 || r.status != 200) return;
                    var data = JSON.parse(r.responseText);
                    resolve(data);
                };
                r.send();
            })
        };
        //执行请求：
        ajax("http://www.filltext.com?rows=10&f={firstName}").then(function(data) {
            callback(data);
        });
        //再做别的事情；
    </script>
</body>
</html>

var promise = new Promise(function(resolve , reject) {
    resolve(); //执行成功回调;
});
console.log(0);
promise.then(function(val) {
    console.log(1); 
}, function() {
    console.log("失败");
});
console.log("2");

Then メソッドは毎回異なる Promise インスタンスを返します。この成功コールバックのパラメータです。前の Promise インスタンスは、resolve メソッドを実行しました。パラメータ; 一般に、then メソッドは、新しい Promise インスタンスが返された場合、新しい Promise インスタンスを返します。この機能を使用すると、

多層コールバック

；

var promise = new Promise(function(resolve , reject) {
    reject();
});
console.log(0);
promise.then(function(val) {
    console.log(1);
}, function() {
    console.log("失败");
});
console.log("2");

コードが非同期か同期かに関係なく、Promiseのthenメソッドを使用できます。同期コードはthenメソッドの最初のパラメータに直接記述されます。必要なパラメータは、resolve を通じて次の then メソッドに渡されます。

非同期コードの場合は、Promise インスタンスを直接返します。

new Promise(function(resolve , reject) {
    resolve(1);
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve , reject) {
        resolve(2);
    });
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve , reject) {
        resolve(3);
    });
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve , reject) {
        resolve(4);
    });
}).then(function(val) {
    console.log(val);
});

catch メソッド:

catch メソッドは、失敗したコールバックと同じです。前の非同期関数

がエラーをスローすると、そのエラーはキャッチされ、

new Promise(function(resolve , reject) {
    resolve(1);
}).then(function(val) {
    console.log(val);
    return 2;
}).then(function(val) {
    console.log(val);
    return 3;
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve,reject) {
        //异步操作些这里
        resolve(4);
    });
}).then(function(val) {
    console.log(val);
    return 5;
}).then(function(val) {
    console.log(val);
});

Promiseのエラーはレイヤーごとに渡されます。エラーがキャッチされなかった場合は、次の関数に渡されます。キャッチされるまでプロミスオブジェクトを呼び出して、その後続行します。 Promise.all(iterable) iterable パラメーター内のすべての Promise が解決されると、Promise も解決されます

all メソッドは

Promise 関数

のメソッドであることに注意してください。パラメータは配列であり、配列にはすべてが含まれます。これは

Promise

のインスタンスです:

var promise = new Promise(function(resolve , reject) {
    resolve(); //执行成功回调;
});
console.log(0);
promise.then(function(val) {
    console.log("成功");
    throw new Error("heheda");
}).catch(function(e) {
    console.log(e);
}).then(function() {
    console.log("继续执行");
});

Promise.race(iterable)

iterable パラメータ内の子 Promise が成功または失敗すると、親 Promise は、子 Promise の成功の戻り値または失敗の詳細を直ちに使用して、親 Promise バインディングの対応するハンドルをパラメーターとして呼び出し、Promise オブジェクトを返します。

Promise.reject(reason)

Promiseの拒否されたハンドルを呼び出し、このPromiseオブジェクトを返します。

Promise.resolve(value)

Promise オブジェクトを成功値 value で解決します。値が thenable である場合 (つまり、then メソッドを使用している場合)、返される Promise オブジェクトは値を「追跡」し、値の最終状態を採用します。それ以外の場合、戻り値は返された値を満たす (fullfil) ためにこの値を使用します。約束のオブジェクト。

公式の例:

new Promise(function(resolve , reject) {
    resolve(1);
}).then(function(val) {
        console.log(val);
        return new Promise(function(resolve , reject) {
            throw new Error("err");
        });
    }).then(function(val) {
        console.log(val);
        return new Promise(function(resolve , reject) {
            resolve(3);
        });
    }).then(function(val) {
        console.log(val);
        return new Promise(function(resolve , reject) {
            resolve(4);
        });
    }).then(function(val) {
        console.log(val);
    }).catch(function(err) {
        console.log(err);
    }).then(function() {
        console.log("继续执行")
    })

Promise ができたので、カプセル化された XMLHttpRequest を GET メソッドにカプセル化できます。これは使用すると便利です:

var p0 = new Promise(function(resolve) {
    setTimeout(function() {
        resolve(0)
    },1000);
})
var p1 = new Promise(function(resolve) {
    setTimeout(function() {
        resolve(1)
    },2000);
})
var p2 = new Promise(function(resolve) {
    setTimeout(function() {
        resolve(2)
    },3000);
})
Promise.all([p0,p1,p2]).then(function(arr) {
    console.log(arr)
})

次に使用します:

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<p id="log"></p>
<script>
    &#39;use strict&#39;;
    var promiseCount = 0;
    function testPromise() {
        var thisPromiseCount = ++promiseCount;

        var log = document.getElementById(&#39;log&#39;);
        log.insertAdjacentHTML(&#39;beforeend&#39;, thisPromiseCount + &#39;) 开始(同步代码开始)<br/>&#39;);

        // 我们创建一个新的promise: 然后用&#39;result&#39;字符串解决这个promise (3秒后)
        var p1 = new Promise(function (resolve, reject) {
            // 解决函数带着解决（resolve）或拒绝（reject）promise的能力被执行
            log.insertAdjacentHTML(&#39;beforeend&#39;, thisPromiseCount + &#39;) Promise开始(异步代码开始)<br/>&#39;);

            // 这只是个创建异步解决的示例
            window.setTimeout(function () {
                // 我们满足（fullfil）了这个promise!
                resolve(thisPromiseCount)
            }, Math.random() * 2000 + 1000);
        });

        // 定义当promise被满足时应做什么
        p1.then(function (val) {
            // 输出一段信息和一个值
            log.insertAdjacentHTML(&#39;beforeend&#39;, val + &#39;) Promise被满足了(异步代码结束)<br/>&#39;);
        });

        log.insertAdjacentHTML(&#39;beforeend&#39;, thisPromiseCount + &#39;) 建立了Promise(同步代码结束)<br/><br/>&#39;);
    }
    testPromise();
</script>
</body>
</html>

偽のデータのアドレスは次のとおりです。自分で設定できます。コンソールリクエストを渡すことができます。クロスドメインの問題に注意してください。

画像を非同期でロードするために XMLHttpRequest を Promise にカプセル化するケース: http://www.php.cn/

その他:

上記は Promise の基本的な知識の一部であり、その他の知識ポイントもいくつかありますが、機能が限られているため、1 つずつ紹介することはできません (Promise.resolve のさまざまなパラメーター、Generator での使用、Promise の追加メソッドなど)。 );

Promise の実行プロセスを描いてください。Promise の理解が深まります。Promise はまだ少しわかりにくいです

ブラウザのサポート:

Chrome 32、Opera 1、Firefox 29、Safari 8、Microsoft Edge、これらのブラウザはすべてデフォルトでサポートされています

上記は ES6 の新機能、つまり組み込み遅延オブジェクト Promise コードの詳細です。 JavaScript など関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) にご注意ください。

声明

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