# Flutter API 通信 Dio の基本

Dio とは

イタリア語 Dìo は（キリスト教の）神、天主、創造主、造物主の意味します。コトバンク Dio (opens new window)
本田バイクにも Dio という 50cc スクーターがあります。ギリシア神話に登場する「全知全能の神」ゼウスの息子たち「Dioskuroi（ディオスクーロイ）」からの造語だそうです。Dio の名前の由来を教えて (opens new window)
ディスク入出力（Disc Input / Output）の略でも DIO 使っています。Digital Input / Output も同じく

Dio についていろいろ意味があるようですが、Flutter の Dio はイタリア語の神という意味かなと思います。

# Dio の特徴

レスポンスの自動変換できる
インターセプター、グローバル設定ができる
connectTimeout receiveTimeout sendTimeout のタイムアウト設定ができる
ファイルアップロード/ダウンロード
リクエストのリトライができる
リクエストのキャンセルができる
多言語サポート
クッキー、キャッシュを管理できるプラグインがある

Flutter Dio Package (opens new window)
Dio Plugins Topic (opens new window)

# Dio の基本

// api_service.dart
import 'dart:convert';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:dio/dio.dart';

class ApiService {
  final _dio = Dio(BaseOptions(
    baseUrl: dotenv.env['API_BASE_URL'] ?? '',
    connectTimeout: const Duration(seconds: 5), // 5秒
    receiveTimeout: const Duration(seconds: 3), // 3秒
    headers: {'Content-Type': 'application/json'},
  ));

  Future<dynamic> get(String endpoint) async {
    try {
      final response = await _dio.get(endpoint);
      return response.data;
    } on DioException catch (e) {
      throw Exception('Failed to load data: ${e.response?.statusCode}');
    }
  }

  Future<dynamic> post(String endpoint, Map<String, dynamic> data) async {
    try {
      final response = await _dio.post(
        endpoint,
        data: jsonEncode(data),
      );
      return response.data;
    } on DioException catch (e) {
      throw Exception('Failed to post data: ${e.response?.statusCode}');
    }
  }

  Future<dynamic> put(String endpoint, Map<String, dynamic> data) async {
    try {
      final response = await _dio.put(
        endpoint,
        data: jsonEncode(data),
      );
      return response.data;
    } on DioException catch (e) {
      throw Exception('Failed to update data: ${e.response?.statusCode}');
    }
  }

  Future<dynamic> delete(String endpoint) async {
    try {
      final response = await _dio.delete(endpoint);
      return response.data;
    } on DioException catch (e) {
      throw Exception('Failed to delete data: ${e.response?.statusCode}');
    }
  }
}

// user_service.dart
import 'package:my_app/models/user.dart';
import 'api_service.dart';

class UserService {
  final ApiService apiService;

  UserService({required this.apiService});

  Future<List<User>> fetchUsers() async {
    final data = await apiService.get('/users');
    return data.map<User>((json) => User.fromJson(json)).toList();
  }

  Future<User> updateUser(int id, Map<String, dynamic> data) async {
    final response = await apiService.put('/users/$id', data);
    return User.fromJson(response);
  }

  Future<dynamic> deleteUser(int id) async {
    final response = await apiService.delete('/users/$id');
    return response;
  }
}

Javascript の Axios パッケージと似ている使い方で、Axios 経験者なら取り扱いやすいですね。

# Dio のインターセプター

リクエストとレスポンスのインターセプター

import 'package:dio/dio.dart';

void main() async {
  Dio dio = Dio();

  dio.interceptors.add(InterceptorsWrapper(
    onRequest: (options, handler) {
      print('Request: ${options.method} ${options.path}');
      return handler.next(options); // リクエストを続行
    },
    onResponse: (response, handler) {
      print('Response: ${response.statusCode} ${response.data}');
      return handler.next(response); // レスポンスを続行
    },
    onError: (DioError e, handler) {
      print('Error: ${e.message}');
      return handler.next(e); // エラーを続行
    },
  ));

  try {
    Response response = await dio.get('https://jsonplaceholder.typicode.com/posts/1');
    print(response.data);
  } catch (e) {
    print(e);
  }
}

# Dio のリクエストのキャンセル

import 'package:dio/dio.dart';

void main() async {
  Dio dio = Dio();
  CancelToken cancelToken = CancelToken();

  // リクエストの実行
  dio.get(
    'https://jsonplaceholder.typicode.com/posts/1',
    cancelToken: cancelToken,
  ).catchError((e) {
    if (CancelToken.isCancel(e)) {
      print('Request canceled: ${e.message}');
    } else {
      print('Error: ${e.message}');
    }
  });

  // リクエストのキャンセル
  cancelToken.cancel('Request canceled by user.');
}