ホームページ > 記事 > ウェブフロントエンド > ES6 新機能: 遅延オブジェクト Promise 組み込み JavaScript コードの詳細
ES6 新機能: 遅延オブジェクト Promise 組み込み JavaScript コードの詳細
- 黄舟オリジナル
- 2017-03-07 14:26:431430ブラウズ
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>
'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) にご注意ください。