フリーランス チャレンジ!!

読者です 読者をやめる 読者になる 読者になる

フリーランス チャレンジ!!

週休4日制に俺はなる!

【AngularJs】複数のhttp通信を同期処理のようにする方法!!

f:id:ksakae1216:20161018203216p:plain

みなさん、コウタロウです!!

 

今日はタイトルについて。

 

 

http通信の同期処理とは?

AngularJsのhttp通信は非同期処理処理です。

 

非同期処理はクライアントを待たせないようなメリットがある一方、複数の処理を順次処理することができません。

 

例えば、A処理でhttp通信して次に、B処理をしてということがうまくできませんでした。

 

gist976cabda777e78a674420c3646b2e1f0

 

このような場合、doAfuncが終わってからdoBfuncを処理すると思いきやdoAfuncのhttp通信をして結果を受け取るのを待たずにdoBfuncのhttp通信をしてしまいます。

 

doAfuncが終わってからじゃないとdoBfuncを動かしたくないという場合は困りますよね。

A処理が終わってからB処理をすることを同期処理と言います。

 

まあ、普通のプログラムは基本同期処理です。

 

同期処理する方法

さてAngularJsで同期処理する方法をいろいろ確認しましたが全然情報が見つからなく結構時間を書けましたが、下記方法で同期処理ができます。

 

gist925539a3e7d7b8bb225ebd3a152df8be

 

ポイントは"$emit"と"$on"です。

 

処理の順番を説明します。

まず1行目の"doAfunc()"を実行しhttp通信が発生します。

処理が成功すると"success"に処理が入ります、"this.$scope.$emit('wait1', result);"を書くことにより、処理が成功し、resultにhttp通信の結果が入れば"$on"に処理が移ります。

つまり、"this.doBfunc();"が実行されるのです。

 

このように"$emit"と"$on"を使えばAngularJsのhttp通信も同期処理のようにすることができます。

 

最後に

ここに辿り着くまでに丸1日かかりました。

 

「AngularJs 同期」のようにGoogle検索しましたが全然見つかりませんでした。

 

でもこの方法で同期処理ができるのでぜひお試しください!!