おはようございます。
今日は朝から表現してみたいコーディングを探して書いていたりしたので更新が遅れました(-_-)/~~~ピシー!ピシー!
bboyで見てくれている人がもしいるのであればほんとに申し訳がたたないですが、しばらくは技術ブログとしてこの毎日更新を頑張っていきます。
やっぱりエンジニア就職して、職場の周りとの実力の差に完全に食らっているのでなるべく、エンジニア業にかける時間を増やして成長スピードを上げていきたいんです。
練習は短時間集中でやって、進化があったときに動画をツイッターなりインスタなり上げていきます(それが今ダンスのモチベです)
というわけで昨日の続きです。
Promiseの使い方
Promise構文はこんなんでした。
resolveが呼ばれた場合
resolve:解決する
new Promise(function(resolve,reject){
resolve("hello");
}).then(function(data){
console.log(data)//コンソールログには"hello"が出力される
}).catch(
).finally(function(){
console.log("終了処理")
});
rejectが呼ばれた場合
reject:拒否する
new Promise(function(resolve,reject){
reject("bye");
}).then{
}).catch(
console.log(data)//コンソールログには"bye"が出力される
).finally(function()){
console.log("終了処理");
}
new Promise(
同期処理
).then(
非同期処理(resolveを待つ)
).catch(
非同期処理(rejectを待つ)
).finally(
非同期処理(then,またはcatchを待つ)
);
使ってみる
resolveを実行
new Promise(function(resolve, reject){
console.log('promise');
resolve();
}).then(function(){
console.log('then');
}).then(function(){
console.log('then');
}).then(function(){
console.log('then');
}).catch(function(){
console.log('catch')
})
console.log('global end')
コンソール
promise
global end
then
then
then
☆ポイント
・global endがthenよりも先に実行されている
thenに渡したcallbackは非同期で実行されるためコールスタックが空になった後で実行される。
・どれだけつなげても多階層になることがなく可読性が上がる
rejectを実行
new Promise(function(resolve, reject){
console.log('promise');
reject();
}).then(function(){
console.log('then');
}).then(function(){
console.log('then');
}).then(function(){
console.log('then');
}).catch(function(){
console.log('catch')
})
console.log('global end')
コンソール
promise
global end
catch
こうするとcatchメソッドに処理が移る
しかしこのrejectというのはnew Promiseで渡すコールバックの中でしか使えないので、特定のthenの中でcatchに処理を移行したい時はthrowを使う
例:一回目のthenでエラーが起こりcatchに処理を飛ばしたい
new Promise(function(resolve, reject){
console.log('promise');
resolve();//ここ
}).then(function(){
console.log('then');
throw new Error();//ここ
}).then(function(){
console.log('then');
}).then(function(){
console.log('then');
}).catch(function(){
console.log('catch')
})
console.log('global end')
コンソール
promise
global end
then
catch
一回目のthenのなかにthrow new Erro();
new Promiseのコールバックにresolve();
こうすると一回目のthenは実行されるが、throwでエラーが発生したとPromiseに伝えることでcatchに処理が移行する。なので二回目のthenは呼ばれない
最後にfinallyを加えるとこうなる
resolveの場合
new Promise(function(resolve, reject){
console.log('promise');
resolve();
}).then(function(){
console.log('then');
throw new Error();
}).then(function(){
console.log('then');
}).then(function(){
console.log('then');
}).catch(function(){
console.log('catch')
}).finally(function(){
console.log('finally')
})
console.log('global end')
コンソール
promise
global end
then
catch
finally
rejectの場合
new Promise(function(resolve, reject){
console.log('promise');
reject();
}).then(function(){
console.log('then');
// throw new Error();
}).then(function(){
console.log('then');
}).then(function(){
console.log('then');
}).catch(function(){
console.log('catch')
}).finally(function(){
console.log('finally')
})
console.log('global end')
コンソール
promise
global end
catch
finally
最後にfinallyの処理が渡ってくる
thenメソッドのコールバックに引数を設定するパターン
resolveの引数にhiを入れた場合
new Promise(function(resolve, reject){
console.log('promise');
resolve('hi');
}).then(function(data){
console.log('then:' + data);
// throw new Error();
}).then(function(data){
console.log('then');
}).then(function(data){
console.log('then');
}).catch(function(data){
console.log('catch')
}).finally(function(data){
console.log('finally')
})
console.log('global end')
コンソール
promise
global end
then: hi
then
then
finally
2つ目のthenにhiを渡したい場合
new Promise(function(resolve, reject){
console.log('promise');
resolve('hi');
}).then(function(data){
console.log('then:' + data);
return data;
// throw new Error();
}).then(function(data){
console.log('then:' + data);
}).then(function(data){
console.log('then');
}).catch(function(data){
console.log('catch')
}).finally(function(data){
console.log('finally')
})
console.log('global end')
コンソール
promise
global end
then: hi
then: hi
then
finally
finallyにdataは渡ってくるのか
new Promise(function(resolve, reject){
console.log('promise');
resolve('hi');
}).then(function(data){
console.log('then:' + data);
return data;
// throw new Error();
}).then(function(data){
console.log('then:' + data);
return data;
}).then(function(data){
console.log('then:' + data);
return data;
}).catch(function(data){
console.log('catch')
}).finally(function(data){
console.log('finally:' + data)
})
console.log('global end')
コンソール
promise
global end
then:hi
then:hi
then:hi
finally:undefined
finallyのコールバックに引数は渡ってこない。
rejectの引数にbyeを入れた場合
new Promise(function(resolve, reject){
console.log('promise');
// resolve('hi');
reject('bye')
}).then(function(data){
console.log('then:' + data);
return data;
// throw new Error();
}).then(function(data){
console.log('then:' + data);
return data;
}).then(function(data){
console.log('then:' + data);
return data;
}).catch(function(data){
console.log('catch:' + data)
}).finally(function(data){
console.log('finally')
})
console.log('global end')
コンソール
promise
global end
catch:bye
finally
catchに渡ってくる
Promiseを使った構文ではresolveまたはrejectが呼ばれるまでは、後続のthenやcatchは実行されないのでこの特徴を利用することでPromiseのコールバックに非同期処理を組み込むことが出来る。
ということで、だいぶ時間が過ぎちゃったので今日はここまで。
それでは本日も良い1日を!
(あと半日やけど)