モバイルアプリを作成する上で、Web APIとの通信は必須となることが多いです。このとき、簡単なHTTP通信から高度な機能を必要とする場面まで、実装方法に悩むことがあるかもしれません。
そこで、今回は高機能なHTTP通信ライブラリ「dio」の使い方を紹介します。
dio パッケージとは
dio パッケージとは、Flutter で HTTP 通信を行う際に使用するライブラリで、以下の特徴があります。
- 多様なHTTPメソッドの対応：GET、POST、PUT、DELETEなど常用されるHTTPメソッドをサポート
- インターセプターの搭載：リクエスト・レスポンスの処理を加えることが可能
- リトライ機能：一旦失敗した場合に自動でリトライが可能
- ファイルアップロード・ダウンロード：大きなデータのやりとりも容易
- キャンセル可能：同時多数のAPI通信をキャンセル
dio のインストール方法
以下のコマンドをターミナルで入力して、パッケージを追加します。
flutter pub add dioパッケージのインストール方法については、以下の記事で詳しく紹介しているのでご参考ください。
基本の使い方
今回の例では、HTTP通信する先として httpbin を使用していきます。
httpbin を使用すると簡単にHTTPリクエストのテストができます。
リクエストの例
最も基本的なリクエストの例（GET、POST、DELETEの3種類）を以下に示します。
import 'package:dio/dio.dart';
final dio = Dio();
void get() async {
final response = await dio.get('https://httpbin.org/get');
print(response);
}
void post() async {
final response = await dio.post(
'https://httpbin.org/post',
data: {'id': 1, 'name': 'dio'}
);
print(response);
}
void delete() async {
final response = await dio.delete('https://httpbin.org/delete');
print(response);
}ヘッダーの設定
ヘッダーを設定するには、options.headers を使用します。
final response = await dio.get(
'https://httpbin.org/get',
options: Options(
headers: {
'Authorization': 'Bearer access_token',
'Content-Type': 'application/json',
}
)
);クエリパラメータの指定
クエリパラメータを指定するには、queryParameters を使用します。
final response = await dio.get(
'https://httpbin.org/get',
queryParameters: {'id': 2, 'name': 'dio'}
);dio のデフォルト設定
dio では、ヘッダーやタイムアウト時間のデフォルト値を設定することができます。何回も使うような設定はデフォルト設定しておくと良いでしょう。
以下のようにすることで、デフォルト設定を行うことができます。
final dio = Dio();
dio.options.baseUrl = 'https://httpbin.org';
dio.options.connectTimeout = Duration(seconds: 5);
dio.options.receiveTimeout = Duration(seconds: 3);または、以下の形式でもデフォルト設定を行うことができます。
final options = BaseOptions(
baseUrl: 'https://httpbin.org',
connectTimeout: Duration(seconds: 5),
receiveTimeout: Duration(seconds: 3),
);
final dio = Dio(options); 上記のように baseUrl を設定しておくと、リクエスト時の URL は、baseUrl 以降の部分を指定するだけで良くなります。
final response = await dio.get('/get');ここで紹介したもの以外にもデフォルト設定できる項目はたくさんあります。
詳しくは API リファレンスをご参照ください。
インターセプターの使い方
インターセプター（Interceptor） は、HTTPリクエストやレスポンスの前後に処理を挟み込むことができる便利な機能です。以下のような用途で使用されます。
- リクエストのログ出力
- 認証トークンの付与
- レスポンスのエラーログ記録
- エラーハンドリングの一元化
- リトライ処理の実装
dio では、onRequest（リクエスト送信前）、onResponse（レスポンス受信後）、onError（エラー発生時）の3種類を使用することができます。
以下のように Interceptor を継承したクラスを作成します。
class CustomInterceptors extends Interceptor {
@override
void onRequest(RequestOptions options, RequestInterceptorHandler handler) {
// リクエスト送信前に呼ばれる
print('REQUEST[${options.method}] => PATH: ${options.path}');
super.onRequest(options, handler);
}
@override
void onResponse(Response response, ResponseInterceptorHandler handler) {
// レスポンス受信後に呼ばれる
print('RESPONSE[${response.statusCode}] => PATH: ${response.requestOptions.path}');
super.onResponse(response, handler);
}
@override
Future onError(DioException err, ErrorInterceptorHandler handler) async {
// エラー発生時に呼ばれる
print('ERROR[${err.response?.statusCode}] => PATH: ${err.requestOptions.path}');
super.onError(err, handler);
}
}作成した CustomInterceptors は、dio.interceptors.add でセットすることができます。
dio.interceptors.add(CustomInterceptors());まとめ
Flutter で HTTP 通信を行うために使用するライブラリの一つである dio の使用方法について紹介しました！
- dio では簡単にHTTPリクエストを実行可能
- デフォルト設定を行うことで、各リクエストで共通の設定が可能
- Interceptor を使用することで、リクエスト送信前、レスポンス受信後、エラー発生時の各タイミングで処理が可能
以上で、【Flutter】dioを使ったHTTP通信の方法 は終わりです。
コメント