非同期処理メモ③

おはようございます。

今日は朝から表現してみたいコーディングを探して書いていたりしたので更新が遅れました(-_-)/~~~ピシー!ピシー!

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日を！

(あと半日やけど)