🕊️

【Flutter / Dart】httpについて<APIとか>

2022/04/21に公開

概要

async awaitの次はこれだろう。
そう!ネットワーク通信における情報の取得だろう。(つまりAPIで情報を取得することだ)

httpについて

導入

pubspec.yamlに以下を記載し、flutter pub getのコマンドを叩いて、ライブラリを取り込みます。

http: ^[最新のバージョン]

httpの記述

import 'package:http/http.dart' as http;  // 使用時にライブラリをインポートする。

//get通信の場合
http.get(Uri.https('${ドメイン}','${パス}',{クエリ(Map}));

//post通信の場合
http.post(Uri.https('${ドメイン}','${パス}'),body: {クエリ(Map});

※他にもdelete,putなどもサポートしている。

Modelについて

APIで取得したデータはだいたいJsonである。
このデータをdartで読み取れるようにする箱がModelである。

// Modelの例
class Album {
  final int id;
  final String title;
  final int userId;

  Album({required this.id, required this.title, required this.userId});

  factory Album.fromJson(Map<String, dynamic> json) {
    return Album(
      id: json['id'] as int,
      title: json['title'] as String,
      userId: json['userId'] as int,
    );
  }
}

[内容]
上記、fromJsonでjsonのデータをModelにセットしている。
httpからはString形式でJsonが返却されるのだが、これをdartではimport 'dart:convert';jsonDecodeにてStringをMap<String, dynamic>に変換できる。
あとは、Mapのキー値を指定しモデルにセットすれば完成だ。

ちなみにJsonがリスト状になっている場合は以下のように記述することで対応可能だ。

json.map<Album>((element) => Album.fromJson(element)).toList()

具体例

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:albums_photos/models/albums.dart';

class AlbumsRepository {
  Future<Albums> getAlbums() async {
    try {
      final response =
          await http.get(Uri.https('jsonplaceholder.typicode.com', 'albums'));
      return Albums.fromJson(jsonDecode(response.body));
    } catch (error) {
      throw Exception(error.toString());
    }
  }
}

[内容]
これはHTTP通信で取得したJsonデータをアルバムモデルにセットして、
そのモデルを返却するファンクションである。

今回は、ステータスコードが200じゃない場合や、response.bodyの中身が思っていた内容と違う場合も全部Exceptionとして返却しているがresponse.bodyを事前に判定する処理をかましたり。
responseがもっている、statusCodeにてHttpステータスの値取得できるので予めそこで判定が可能なので余力あればした方いいだろう。

所感

API通信ができるようになると扱える情報量が増え、できることがかなり広がるのでプログラムが楽しくなる。
これを前述の非同期処理を用いてユーザーに待たせている感なく表示などできればいい感じの処理が描けるようになる気がする。

リンク集

Discussion