ブログ

Dioとは何か

Dioは、主に2つの異なるコンテキストで使用される名前です。

1. ジョジョの奇妙な冒険のキャラクター: Dio（またはDIO）は、漫画『ジョジョの奇妙な冒険』の登場人物で、悪のカリスマや邪悪の化身として描かれています。彼は物語のラスボスとして登場し、ジョースター家の宿敵として描かれています。彼のキャラクターは、嫉妬やハングリー精神などの人間の感情の影の部分を深く掘り下げたもので、自分のためならどんなに汚いことも平気で行うという悪役です。

2. 会計の用語: 一方、会計の分野では、DIOは「Days Inventory Outstanding」の略で、「在庫回転期間」を意味します。これは、在庫がどれだけの期間保持されているかを示す指標で、企業の効率性を評価するために使用されます。

したがって、FlutterとDioを組み合わせてJWTトークンを扱うという文脈では、DioはおそらくHTTPクライアントライブラリの一つを指しています。このライブラリは、FlutterアプリケーションでHTTPリクエストを簡単に送信するために使用されます。JWTトークンは、セキュアな認証と認可を提供するために使用されます。

FlutterでDioをセットアップする方法

FlutterでDioをセットアップするための手順は以下の通りです。

1. パッケージのインストール

まず、必要なパッケージをインストールします。pubspec.yamlファイルに以下の依存関係を追加します。

dependencies:
  dio: ^4.0.4
  flutter_riverpod: ^1.0.3
  freezed: ^1.1.1
  freezed_annotation: ^1.1.0
  json_serializable: ^6.1.5

dev_dependencies:
  build_runner: ^2.1.8
  flutter_lints: ^1.0.0
  flutter_test:
    sdk: flutter

2. Dioのインスタンス作成

次に、Dioのインスタンスを作成します。このインスタンスを通じて、HTTPリクエストを送信します。

import 'package:dio/dio.dart';

Dio dio = Dio();

3. Dioの設定

Dioのインスタンスを作成したら、必要な設定を行います。以下は一例です。

dio.options.baseUrl = "https://your-api-base-url";
dio.options.connectTimeout = 5000; // 5s
dio.options.receiveTimeout = 3000; // 3s

4. HTTPリクエストの送信

最後に、Dioのインスタンスを使用してHTTPリクエストを送信します。以下はGETリクエストの一例です。

final response = await dio.get("/endpoint");

以上が、FlutterでDioをセットアップする基本的な手順です。具体的なコードはプロジェクトの要件によりますので、適宜調整してください。.

Dioを使用してGETとPOSTリクエストを行う方法

Dioを使用してGETとPOSTリクエストを行う方法は以下の通りです。

GETリクエストの送信

GETリクエストを送信するには、dio.get()メソッドを使用します。以下に一例を示します。

import 'package:dio/dio.dart';

final dio = Dio();
final url = 'https://api.example.com/data';
final response = await dio.get(url);

このコードは、指定したURLにGETリクエストを送信し、レスポンスを取得します。

POSTリクエストの送信

POSTリクエストを送信するには、dio.post()メソッドを使用します。以下に一例を示します。

import 'package:dio/dio.dart';

final dio = Dio();
final url = 'https://api.example.com/data';
final data = {
  'key1': 'value1',
  'key2': 'value2',
};

final response = await dio.post(url, data: data);

このコードは、指定したURLにPOSTリクエストを送信し、レスポンスを取得します。

以上が、Dioを使用してGETとPOSTリクエストを行う基本的な手順です。具体的なコードはプロジェクトの要件によりますので、適宜調整してください.

Dioインターセプターを使用した自動トークンリフレッシュの実装

Dioインターセプターを使用して自動トークンリフレッシュを実装する方法は以下の通りです。

1. Dioインスタンスの作成

まず、Dioのインスタンスを作成します。

import 'package:dio/dio.dart';

Dio dio = Dio();

2. Dioインターセプターの設定

次に、Dioインターセプターを設定します。このインターセプターは、リクエストが送信される前とレスポンスが受信された後に処理を行うことができます。

dio.interceptors.add(InterceptorsWrapper(
  onRequest: (RequestOptions options) async {
    // リクエストが送信される前の処理
    return options;
  },
  onResponse: (Response response) async {
    // レスポンスが受信された後の処理
    return response;
  },
  onError: (DioError e) async {
    // エラーが発生した場合の処理
    return e;
  },
));

3. 自動トークンリフレッシュの実装

最後に、自動トークンリフレッシュを実装します。これは、onErrorメソッド内で行います。トークンが無効になった場合（例えば、トークンの有効期限が切れた場合）、新しいトークンを取得してリクエストを再送信します。

dio.interceptors.add(InterceptorsWrapper(
  onError: (DioError e) async {
    if (e.response?.statusCode == 403) {
      // トークンが無効になった場合

      // 新しいトークンを取得
      String newToken = await getNewToken();

      // トークンを更新
      dio.options.headers["Authorization"] = "Bearer $newToken";

      // リクエストを再送信
      return dio.request(e.request.path, options: e.request);
    }

    return e;
  },
));

以上が、Dioインターセプターを使用した自動トークンリフレッシュの基本的な実装方法です。具体的なコードはプロジェクトの要件によりますので、適宜調整してください.