JavaScriptで複数の非同期処理(例:API)を走らせて、その非同期処理が全て終わった後で、何らかの処理をしたい時について。
Contents
when
jQueryですとwhenというメソッドがあり、これを使うことでこのような問題が解決できます。
コード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
var func1 = $.ajax({ type:'GET', url:'/library/ajaxpost2.json', dataType:'json' }).done((res1) => { return res1 }); var func2 = $.ajax({ type:'GET', url:'/library/ajaxpost3.json', dataType:'json' }).done((res2) => { return res2 }); $.when(func1, func2).done(function(res1, res2){ //下記のように書いておくとres1の結果を処理したあと、res2が処理される //ajaxを並列的に行っておきながら実行後は同期的にres1,res2の順に処理がされる console.log(res1) console.log(res2) }) |
Promise_all
これをPromiseで書く場合、下記のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
var func1 = new Promise((resolve, reject) => { $.ajax({ type:'GET', url:'/library/ajaxpost2.json', dataType:'json' }).done((data) => { resolve(data) }).fail((data) => { reject(data) }) }) var func2 = new Promise((resolve, reject) => { $.ajax({ type:'GET', url:'/library/ajaxpost3.json', dataType:'json' }).done((data) => { resolve(data) }).fail((data) => { reject(data) }) }) Promise.all([ func1, func2 ]).then((res1)=>{ console.log(res1[0]) console.log(res1[1]) }).catch((err)=>{ alert("失敗しました。"); }) .finally(()=>{ console.log('処理が完了しました。') }) |
