Flutter网络请求Cookie缓存插件dio_cookie_caching_handler的使用

管理Dio Cookie

在非Web环境中管理Dio的Cookies。

特性

• 当Cookies改变时存储到单个文件中。
• 在内存中保留Cookies以便随时使用。
• 支持Expires和Max-Age属性。
• 不支持其他属性。
• 当需要时从文件加载Cookies。无需设置Async/Await。

开始使用

在pubspec.yaml文件中添加依赖：

dependencies:
  dio_cookie_caching_handler: ^0.0.7

然后运行以下命令以获取依赖项：

flutter pub get

使用方法

首先，我们需要初始化Dio并添加cookieCachedHandler()拦截器。以下是完整的示例代码：

import 'package:dio/dio.dart';
import 'package:dio_cookie_caching_handler/dio_cookie_caching_handler.dart';
import 'package:flutter/foundation.dart';

void main() {
  runApp(const MyApp());
}

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

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

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> {
  late final Dio _dio;
  Map<String, dynamic> _fetchedData = {};

  [@override](/user/override)
  void initState() {
    _initDio();
    super.initState();
  }

  void _initDio() {
    _dio = Dio();
    if (!kIsWeb) {
      _dio.interceptors.add(cookieCachedHandler());
    }
  }

  void _fetchSomeData() {
    _dio.get("https://reqres.in/api/users/2").then((value) {
      setState(() {
        _fetchedData = value.data;
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              _fetchedData.entries.map((e) => "${e.key}:${e.value}").join("\n"),
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _fetchSomeData,
        tooltip: 'Fetch',
        child: const Icon(Icons.add),
      ),
    );
  }
}

代码说明

1. 导入必要的包：

   import 'package:dio/dio.dart';
   import 'package:dio_cookie_caching_handler/dio_cookie_caching_handler.dart';
   import 'package:flutter/foundation.dart';
   

2. 初始化Dio实例：

   void _initDio() {
     _dio = Dio();
     if (!kIsWeb) {
       _dio.interceptors.add(cookieCachedHandler());
     }
   }
   

   这里我们检查是否是在Web环境下。如果不是，则添加cookieCachedHandler()拦截器来处理Cookies。

3. 发起网络请求：

   void _fetchSomeData() {
     _dio.get("https://reqres.in/api/users/2").then((value) {
       setState(() {
         _fetchedData = value.data;
       });
     });
   }
   

   我们通过_dio.get方法发起一个GET请求，并将返回的数据更新到状态中。

4. 构建UI：

   [@override](/user/override)
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: Text(widget.title),
       ),
       body: Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             const Text(
               'You have pushed the button this many times:',
             ),
             Text(
               _fetchedData.entries.map((e) => "${e.key}:${e.value}").join("\n"),
               style: Theme.of(context).textTheme.headlineMedium,
             ),
           ],
         ),
       ),
       floatingActionButton: FloatingActionButton(
         onPressed: _fetchSomeData,
         tooltip: 'Fetch',
         child: const Icon(Icons.add),
       ),
     );
   }