🌈 概要
httpを始めとする処理を行う場合、多くは非同期処理になります。
通信を行う処理と通信が成功/失敗した場合の処理をそれぞれ記述します。
割と多く出て来る記述だと思うのでなるべく分かりやすく綺麗に書きたいですよね。
通信処理を何も考えず書いてみよう
通信の基本処理
解説
シンプルですね、特に解説がなくてもやることは想像出来ます。
通信が成功した時の処理
解説
通信後の挙動をthenブロックの中に書いてみました。
httpパッケージの各主要メソッドはFuture<Response>を返却する様になっています。Futureクラスは非同期処理の結果を表すクラスです。
このFutureにはthenメソッドがあり、レスポンスを受けた時の処理を書く事が出来ます。
書き方にもよりますが、ここにnotifyしたりとか様々な処理が入って来るので
もっとみづらくなる可能性もありますね。
通信が失敗した時の処理
解説
catchErrorを追加しました。thenメソッドは新たなFutureを返却します。
それに対してcatchErrorを書く事でエラー時の処理を記述することが出来ます。
現状の問題を整理
さて、大体出来ましたがここで問題を整理してみましょう。
1. ネストが深くなっていて読みづらい
2. fetchSomethingRequestメソッドの呼び出し側が通信の内容によって処理を出し分けるなどが出来ない
3. 2に起因しているところではあるがUI系処理とロジック系処理が一つのメソッドに入っているので可読性が低い
これらを解消していきましょう。
Futureを返してみよう
解説
Futureを返す様にしました。Futureインスタンスが持つthenメソッドやcatchErrorメソッドはFutureを返します。
なので、この値をメソッドの呼び出し側に返却しましょう。
こうすることにより、呼び出し側で処理の出し分けが出来る様になりました。
さらにUIの処理をUI側に移動させることが出来ました。
asyncの追加
解説
asyncと言うキーワードが出てきました。
Asynchronous programming: futures, async, await
これを波括弧の前に記述すると、そのメソッドは全てFutureでラップされます。
今回の例では、何も返していないので本来であれば最初の例がそうであった様にvoid型です。
今asyncキーワードを付けた事によりreturn式を書かなくてもFuture<void>を返しています。
言い換えるなら最後に return Future.value();を書いているのと等価と言う事です。
awaitの追加
解説
ぱっと見、気が付きますか？
そうです、ネストが一つ減りました。
awaitキーワードは非同期処理が終わるまで待ってくれると言うものです。
すごく簡単に言うならFuture<T>をTに変換してくれると考えると楽かもしれません。
http.get(url)はFuture<Response>を返します。
このメソッドを呼ぶ際にawaitを付けるとこの処理が終わるまで待ってくれます。
なので、thenブロックが必要なくなり、さも同期処理の様に書くことができます。
通信処理などの非同期処理は必ず扱う処理の一つだと思うので、
ちゃんと理解して少しでも綺麗に書ける様になるのが大事ですね。
Twitterフォローお願いします
「次回以降も記事を読んでみたい！」「この辺分からなかったから質問したい！」
そんな時は、是非Twitter (@daiki1003)やInstagram (@ashdik_flutter)のフォローお願いします♪
Twitterコミュニティ参加お願いします
Twitterコミュニティ「Flutter lovers」を開設しました！参加お待ちしております😁
☕️ Buy me a coffee
また、記事がとても役に立ったと思う人はコーヒーを奢っていただけると非常に嬉しいです！
コメント