FlutterでサクッとAPIリクエストをする方法

Pocket

こんにちは、やぎにいです。

今回はかっちりしたHttpClientなライブラリ（Dioなど）を用いずにサクッとAPI通信をする方法を備忘録代わりに残します。

最近Flutterをやっているのですが、API通信を絡めたときに結構情報が少なかったのでちょっと困った部分でした。

下準備
実際に通信をする
Jsonレスポンスをコンバートする
まとめ

下準備

今回はDart-lang純正のhttpライブラリを使います（https://pub.dev/packages/http）。

まずプロジェクトルートディレクトリでDependencyに追加しましょう

$ flutter pub add http
$ flutter pub get

これで（現時点では）0.13.4のhttpライブラリが pubspec.yamlに追加されたと思います。

実際に通信をする

Flutterでは非同期処理を Future を用いて async/await で呼び出すケースが多いのでそれに習って通信をしてみます。

以下のようなメソッドで通信してみるのがよいと思います。

import 'package:http/http.dart' as http; // これを書かないとライブラリをコールできません

Future<void> _requestAPI() async {
  var url = Uri.parse('リクエスト先のAPI URL');
  var response = await http.get(url);

  if (response.statusCode == 200) {
    print('レスポンスBody: ${response.body}');
  } else {
    // ここでエラーハンドリングができます
  }
}

今回は Future<void> を返り値としたメソッドにしていますが、もちろんResponseBodyの方をJsonパースしたモデルクラスをreturnするようにしてFuture<HogeModel>が返り値となるメソッドにしても大丈夫です。

例えばStatefulWidgetを用いてる場合、Stateクラス内に上記のようなメソッドを用意し、レスポンスが正しく拾えたところでsetState()を呼んで値を代入すればWidgetにも反映されるでしょう。

Jsonレスポンスをコンバートする

上記まででAPIリクエストができましたが、受け取ったJSONをデコードしてやりたい場合は簡単なものであれば dart:convert を用いることができます。これはDart標準なので import 'dart:convert' as convert; と記述してあげれば呼ぶことができます。

例えば以下のようなモデルクラスがあるとしましょう。

class User {
  final String name;
  final int age;
}

これにAPIから返却されたユーザーの名前と年齢をいい感じにシリアライズして、Userクラスのオブジェクトとして扱いたい場合は以下のようにUserクラスを書いてあげます。

class User {
  final String name;
  final int age;

  User(this.name, this.age);

  User.fromJson(Map<String, dynamic> json)
    : name = json['name'],
      age = json['age'];
}

User.fromJson(Map<String, dynamic> json) が肝です。これと dart:convert を合わせると以下のようなメソッドが作れるでしょう。

import 'package:http/http.dart' as http;
import 'dart:convert' as convert;
Future<void> _requestUserInformation() {
  var url = Uri.parse('リクエスト先のAPI URL');
  var response = await http.get(url);

  if (response.statusCode == 200) {
    Map<String, dynamic> userJson = convert.jsonDecode(response.body); // レスポンスBodyをMapにデコードする
    User user = User.fromJson(userJson); // ここで先ほど用意したメソッドを使ってUserクラスのオブジェクトにする

    // StatefulWidget内であれば以下のようにするとWidgetのTextとかに表示もできます。
    setState(() {
      _userName = user.name;
    });
  } else {
    // ここでエラーハンドリングができます
  }
}