# Flutter で HTTP API 通信

Flutter の http パッケージを使用して、外部 API と通信します。

# HTTP パッケージを追加

コマンドで追加すると直接にパッケージ管理ファイルに追加する方法があります。
Javascript のパッケージ管理と似ていますが、バージョンを指定してコマンド追加することもできます。

  1. コマンドで追加
# 最新パッケージ
flutter pub add http

# バージョン指定して追加
flutter pub add http@0.14.0
  1. pubspec.yaml ファイルに追加
dependencies:
  flutter:
    sdk: flutter
  http: ^1.2.1

# 使い方

import 'dart:convert' as convert;
import 'package:http/http.dart' as http;

void main(List<String> arguments) async {
  // This example uses the Google Books API to search for books about http.
  // https://developers.google.com/books/docs/overview
  var url =
      Uri.https('www.googleapis.com', '/books/v1/volumes', {'q': '{http}'});

  // Await the http get response, then decode the json-formatted response.
  var response = await http.get(url);
  if (response.statusCode == 200) {
    var jsonResponse =
        convert.jsonDecode(response.body) as Map<String, dynamic>;
    var itemCount = jsonResponse['totalItems'];
    print('Number of books about http: $itemCount.');
  } else {
    print('Request failed with status: ${response.statusCode}.');
  }
}

# 非同期

HTTP リクエストは非同期で行われるため、async/await を適切に使用することが必要です。

Future<void> fetchData() async {
  final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));
  // 処理
}

# エラーハンドリング

try {
  final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));
  if (response.statusCode == 200) {
    // 成功時の処理
  } else {
    throw Exception('Failed to load data');
  }
} catch (e) {
  print('Error: $e');
  // ユーザーにエラーメッセージを表示する
}

# JSON のデコードとエンコード

HTTP レスポンスのデータは通常、JSON 形式で提供されます。JSON のデコードとエンコードを行うために、dart:convert ライブラリを使用します。

# デコード



 

import 'dart:convert' as convert;

var data = convert.jsonDecode(response.body)

# エンコード






 


import 'dart:convert' as convert;

final response = await http.post(
  Uri.parse('https://jsonplaceholder.typicode.com/posts'),
  headers: {'Content-Type': 'application/json'},
  body: convert.jsonEncode({'title': 'foo', 'body': 'bar', 'userId': '1'}),
);

# タイムアウトの設定

http パッケージを使用する際、デフォルトではタイムアウト時間が設定されていません。
アプリが無限に待機しないように、タイムアウト設定を適切に設定する必要があります。




 





try {
  final response = await http
      .get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'))
      .timeout(Duration(seconds: 10));
  // 処理
} catch (e) {
  // タイムアウトや他のエラーを処理
}

# キャッシュの管理

http パッケージ自体にはキャッシュ機能がありません。リクエストの結果をキャッシュする場合、dio など他のライブラリを使用する必要があります。

# ステート管理

HTTP リクエストの結果を適切に管理するために、Provider や Riverpod、Bloc などのステート管理ライブラリを使用する必要があります。

# 参考

http: ^1.2.1 (opens new window)

2024-06-02
  • flutter