Flutter网络请求插件wat_dio的使用

Flutter网络请求插件wat_dio的使用

概述

wat_dio 是一个基于 Dio 的 Flutter 插件，主要用于处理基于 JSON Web Token (JWT) 的过期刷新令牌问题。它通过拦截器机制捕获 HTTP 响应并自动处理令牌刷新逻辑。

安装

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  wat_dio: ^0.0.3

然后运行以下命令以安装依赖：

flutter pub get

使用示例

以下是一个完整的示例，展示了如何使用 wat_dio 进行网络请求。

示例代码

import 'package:flutter/material.dart';
import 'package:wat_dio/wat_dio.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'WatDio 示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(
        title: 'WatDio 示例',
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              '点击按钮测试 API 调用',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineLarge,
            ),
          ],
        ),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          const SizedBox(
            width: 20,
          ),
          FloatingActionButton(
            onPressed: () async {
              String baseApi = "https://rickandmortyapi.com/api";

              // 初始化 Dio 实例
              final dio = Dio(
                BaseOptions(
                  baseUrl: baseApi,
                  validateStatus: (value) {
                    return value! < 500;
                  },
                ),
              );

              // 创建 RestService 实例
              var service = RestService(
                dioClient: dio,
                expiredToken: (Response<dynamic> response, ResponseInterceptorHandler handler) async {
                  // 处理过期令牌的逻辑
                  print('令牌已过期，需要刷新...');
                  // 在这里实现刷新令牌的逻辑，例如调用后端接口获取新令牌
                  // 返回 true 表示成功刷新令牌
                  return true;
                },
              );

              // 调用 API
              try {
                final response = await service.get(endpoint: "/character");
                print('API 响应: ${response.data}');
              } catch (e) {
                print('请求失败: $e');
              }
            },
            tooltip: '测试 API 调用',
            child: const Text("测试 API"),
          ),
          const Spacer(),
          FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: const Icon(Icons.add),
          ),
        ],
      ),
    );
  }
}