ホームページ > 記事 > ウェブフロントエンド > ES6 新機能: 遅延オブジェクト Promise 組み込み JavaScript コードの詳細
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");
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); });
がエラーをスローすると、そのエラーはキャッチされ、
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 関数のメソッドであることに注意してください。パラメータは配列であり、配列にはすべてが含まれます。これは
Promisevar 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.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> 'use strict'; var promiseCount = 0; function testPromise() { var thisPromiseCount = ++promiseCount; var log = document.getElementById('log'); log.insertAdjacentHTML('beforeend', thisPromiseCount + ') 开始(同步代码开始)<br/>'); // 我们创建一个新的promise: 然后用'result'字符串解决这个promise (3秒后) var p1 = new Promise(function (resolve, reject) { // 解决函数带着解决(resolve)或拒绝(reject)promise的能力被执行 log.insertAdjacentHTML('beforeend', thisPromiseCount + ') Promise开始(异步代码开始)<br/>'); // 这只是个创建异步解决的示例 window.setTimeout(function () { // 我们满足(fullfil)了这个promise! resolve(thisPromiseCount) }, Math.random() * 2000 + 1000); }); // 定义当promise被满足时应做什么 p1.then(function (val) { // 输出一段信息和一个值 log.insertAdjacentHTML('beforeend', val + ') Promise被满足了(异步代码结束)<br/>'); }); log.insertAdjacentHTML('beforeend', thisPromiseCount + ') 建立了Promise(同步代码结束)<br/><br/>'); } 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) にご注意ください。