EcmaScript 6 Promiseに深く入り込み、手書きで実現します.
11194 ワード
まず、まずPromiseの使い方を見てみましょう.Promiseは主に非同期に使われています.前のJSでは、画像のアップロードやAjaxのほか、非同期に使う場所はほとんどありません.しかしNode.JSの出現は、この現象を変えた.Nodeが現れたとき、バックエンド言語、Java、Python、PHPはすでにバックエンドの主なシェアを占めていたので、引き出したいなら、他の言語にはない特徴がある.Nodeの特徴は、大量のコールバックで同時処理することである.そのため、大量のコールバック関数が使われ、Promiseが登場した.もちろん、ES 7に登場するasynsとawaitは、コールバックを完璧に表現している点がKoa 2では多く使われている.Promiseはいったい何なのか、まずPromiseの使い方を明らかにしましょう.
Promiseを使用しない場合:
私たちはajaxメソッドを定義し、settimeoutで要求を送信する操作をシミュレートし、1秒でこのメソッドを出力し、結果も正しく出力します.
Promise基本使用:
前述と同様に,今回はPromiseオブジェクトを返すだけで,Promiseオブジェクトはthenメソッドをチェーン呼び出して次の操作を行うことができる.
Promiseチェーンコール:
注意、thenメソッドでは、return 1のようなPromiseオブジェクトがデフォルトで返されます.この1は、次のthen(value=>{})のvalue値に対応しますが、このような機能は少なすぎます.例えば、エラーを投げ出したり、メンテナンスが悪いので、return new Promise()を書くべきです.
Promiseチェーン呼び出しの複雑な状況:
1つ目のメソッドは、返される結果パラメータが、2つ目のメソッドで実行され、2つ目のメソッドで返されるパラメータが3つ目に実行されます.
Promiseエラーの処理:
thenだけでもcatchを書いて異常をキャプチャすることをお勧めします.
Promiseプレミアム編:
すべての画像をロードしてからページに追加します.
画像をロードしたら、ページに追加します.
実装キュー:
このJQueryを実現するanimateキューに頼ることができます.
ES 7表記:
Promise.reduceは、関数を順番に実行するためにも使用できますが、使用可能なシーンは非常に限られており、一般的にファイル情報を読み取るために使用されます.
手書きPromise実装:
Promiseを使用しない場合:
const ajax = function(callback){
console.log("start");
setTimeout(()=>{
callback&&callback.call();
},1000)
}
ajax(function(){
console.log("Hello World");
})
私たちはajaxメソッドを定義し、settimeoutで要求を送信する操作をシミュレートし、1秒でこのメソッドを出力し、結果も正しく出力します.
Promise基本使用:
const ajax = function(){
console.log("start");
return new Promise(function(resolve,reject){
setTimeout(()=>{
resolve("hello");
},1000)
})
}
ajax().then((value)=>{
console.log(value,"world");
})
前述と同様に,今回はPromiseオブジェクトを返すだけで,Promiseオブジェクトはthenメソッドをチェーン呼び出して次の操作を行うことができる.
Promiseチェーンコール:
const ajax = function(){
console.log("start");
return new Promise(function(resolve,reject){
setTimeout(function(){
resolve()
},1000);
})
}
ajax().then(function(){
return new Promise(function(resolve,reject){
setTimeout(function(){
resolve()
},2000);
})
}).then(()=>{
console.log("Hello World");
})
注意、thenメソッドでは、return 1のようなPromiseオブジェクトがデフォルトで返されます.この1は、次のthen(value=>{})のvalue値に対応しますが、このような機能は少なすぎます.例えば、エラーを投げ出したり、メンテナンスが悪いので、return new Promise()を書くべきです.
Promiseチェーン呼び出しの複雑な状況:
new Promise(resolve=>{
console.log("start1");
setTimeout(()=>{
resolve(100);
},1000);
})
.then(value=>{
return new Promise(resolve=>{
console.log("start2");
console.log(value);
setTimeout(()=>{
resolve(200);
},1000);
})
})
.then(value=>{
return new Promise(resolve=>{
console.log("start3");
console.log(value);
setTimeout(()=>{
resolve(300);
},1000);
})
})
1つ目のメソッドは、返される結果パラメータが、2つ目のメソッドで実行され、2つ目のメソッドで返されるパラメータが3つ目に実行されます.
Promiseエラーの処理:
const ajax = function(num){
console.log("start");
return new Promise(function(resolve,reject){
if(num>5){
resolve();
}else{
throw new Errow(" ");
}
})
}
ajax(3).then(()=>{
console.log("Hello World");
}).catch((err)=>{
console.log(err);
})
thenだけでもcatchを書いて異常をキャプチャすることをお勧めします.
Promiseプレミアム編:
すべての画像をロードしてからページに追加します.
function loadImg(src) {
return new Promise((resolve, reject) => {
let img = document.createElement('img');
img.src = src;
img.onload = function() {
resolve(img);
}
img.onerror = function(err) {
reject(err);
}
})
}
function showImgs(imgs) {
imgs.forEach(function(img) {
document.body.appendChild(img);
})
}
Promise.all([
loadImg('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559449634314&di=56a92121182ba40c4a640c053dc0c64b&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F9825bc315c6034a8ef5250cec5134954082376c9.jpg'),
loadImg('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559449650753&di=5642d7deef9e1e63b6f3868c75b625f0&imgtype=0&src=http%3A%2F%2Fg.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fc2cec3fdfc03924590b2a9b58d94a4c27d1e2500.jpg'),
loadImg('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559449650745&di=6d65c12f144a14bb2593901da1e995a1&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F0b46f21fbe096b63491b16ea06338744ebf8ac0e.jpg')
]).then(showImgs)
画像をロードしたら、ページに追加します.
function loadImg(src){
return new Promise((resolve,reject)=>{
let img=document.createElement('img');
img.src=src;
img.onload=function(){
resolve(img);
}
img.onerror=function(err){
reject(err);
}
})
}
function showImgs(img){
let p=document.createElement('p');
p.appendChild(img);
document.body.appendChild(p)
}
Promise.race([
loadImg('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559449634314&di=56a92121182ba40c4a640c053dc0c64b&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F9825bc315c6034a8ef5250cec5134954082376c9.jpg'),
loadImg('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559449650753&di=5642d7deef9e1e63b6f3868c75b625f0&imgtype=0&src=http%3A%2F%2Fg.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fc2cec3fdfc03924590b2a9b58d94a4c27d1e2500.jpg'),
loadImg('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1559449650745&di=6d65c12f144a14bb2593901da1e995a1&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%210b46f21fbe096b63491b16ea06338744ebf8ac0e.jpg')
]).then(showImgs)
実装キュー:
function queue(things) {
let promise = Promise.resolve();
things.forEach(element => {
promise = promise.then(() => {
return new Promise(resolve => {
setTimeout(() => {
console.log(element)
resolve('ok');
}, 1000);
});
})
});
}
queue(['a', 'b', 'c']);
このJQueryを実現するanimateキューに頼ることができます.
ES 7表記:
async function queue(arr) {
let res = null
for (let promise of arr) {
res = await promise(res)
}
return await res
}
queue(["a", "b", "c"])
.then(data => {
console.log(data)// abc
})
Promise.reduceは、関数を順番に実行するためにも使用できますが、使用可能なシーンは非常に限られており、一般的にファイル情報を読み取るために使用されます.
手書きPromise実装:
const PENDING = "pending";
const RESOLVED = "resolved";
const REJECTED = "rejected";
function MyPromise(fn){
let that = this;
that.state = PENDING;
that.value = null;
that.resolvedCallbacks = [];
that.rejectedCallbacks = [];
function resolve(value){
if(that.state === PENDING){
that.state = RESOLVED;
that.value = value;
that.resolvedCallbacks.map(callback=>callback(that.value))
}
}
function reject(value){
if(that.state === PENDING){
that.state = REJECTED;
that.value = value;
that.rejectedCallbacks.map(callback=>callback(that.value))
}
}
try{
fn(resolve,reject)
}catch(e){
reject(e)
}
}
MyPromise.prototype.then = function(onFulfilled,onRejected){
let that = this;
onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v => v;
onRejected = typeof onRejected === 'function' ? onRejected : r=>{throw r};
if(that.state === PENDING){
that.resolvedCallbacks.push(onFulfilled)
that.rejectedCallbacks.push(onRejected)
}
if(that.state === RESOLVED){
onFulfilled(that.value);
}
if(that.state === REJECTED){
onRejected(that.value);
}
}
const ajax = function(){
console.log("start");
return new MyPromise(function(resolve,reject){
setTimeout(()=>{
resolve("hello");
},1000)
})
}
ajax().then((value)=>{
console.log(value,"world");
})