Flutter网络请求辅助插件dio_helper的使用

Flutter网络请求辅助插件dio_helper的使用

dio_helper 是一个基于 Dio 的网络请求工具类，用于简化 Flutter 中的网络请求操作，并支持数据缓存以加快分页加载速度。

使用步骤

1. 添加依赖

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

dependencies:
  dio: ^4.0.0
  dio_cache_interceptor: ^3.0.0

运行以下命令安装依赖：

flutter pub get

2. 创建 dio_helper 工具类

创建一个名为 dio_helper.dart 的文件，并编写如下代码：

import 'dart:convert';
import 'package:dio/dio.dart';
import 'package:dio_cache_interceptor/dio_cache_interceptor.dart';
import 'package:dio_cache_interceptor/src/config.dart';

class DioHelper {
  // 创建Dio实例
  late final Dio _dio;

  // 初始化DioHelper
  DioHelper() {
    _dio = Dio();
    _dio.interceptors.add(
      DioCacheInterceptor(
        options: CacheOptions(
          store: MemCacheStore(), // 使用内存缓存
          policy: CachePolicy.request, // 请求时检查缓存
          maxAge: const Duration(days: 1), // 缓存有效期为1天
        ),
      ),
    );
  }

  // 发送GET请求
  Future<Map<String, dynamic>> get(String url) async {
    try {
      final response = await _dio.get(url);
      return jsonDecode(response.data.toString());
    } catch (e) {
      throw Exception("Error fetching data: $e");
    }
  }

  // 发送POST请求
  Future<Map<String, dynamic>> post(String url, {Map<String, dynamic>? data}) async {
    try {
      final response = await _dio.post(url, data: data);
      return jsonDecode(response.data.toString());
    } catch (e) {
      throw Exception("Error sending data: $e");
    }
  }
}

3. 在项目中使用 dio_helper

在 main.dart 文件中引入并使用 DioHelper：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final DioHelper _dioHelper = DioHelper();
  List<dynamic> _dataList = [];

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

  Future<void> fetchData() async {
    try {
      // 调用GET请求
      final response = await _dioHelper.get('https://jsonplaceholder.typicode.com/posts');
      setState(() {
        _dataList = response['data'];
      });
    } catch (e) {
      print(e);
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dio Helper 示例'),
      ),
      body: ListView.builder(
        itemCount: _dataList.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(_dataList[index]['title']),
            subtitle: Text(_dataList[index]['body']),
          );
        },
      ),
    );
  }
}

更多关于Flutter网络请求辅助插件dio_helper的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter网络请求辅助插件dio_helper的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


dio_helper 是一个基于 dio 的 Flutter 网络请求辅助插件，它简化了 dio 的使用，提供了更便捷的 API 来进行网络请求。dio 是 Dart 语言中一个强大的 HTTP 客户端，支持拦截器、全局配置、FormData、文件上传/下载等功能。

安装 dio_helper

首先，你需要在 pubspec.yaml 文件中添加 dio_helper 依赖：

dependencies:
  flutter:
    sdk: flutter
  dio_helper: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

使用 dio_helper

1. 初始化 DioHelper

在使用 dio_helper 之前，你需要先初始化它。通常你可以在 main.dart 中进行初始化：

import 'package:dio_helper/dio_helper.dart';

void main() {
  DioHelper.init(
    baseUrl: 'https://jsonplaceholder.typicode.com', // 你的 API 基础 URL
    connectTimeout: 5000, // 连接超时时间
    receiveTimeout: 3000, // 接收数据超时时间
  );

  runApp(MyApp());
}

2. 发起 GET 请求

使用 DioHelper 发起 GET 请求非常简单：

import 'package:dio_helper/dio_helper.dart';

Future<void> fetchData() async {
  try {
    var response = await DioHelper.get('/posts');
    print(response.data);
  } catch (e) {
    print('Error: $e');
  }
}

3. 发起 POST 请求

发起 POST 请求也很简单：

import 'package:dio_helper/dio_helper.dart';

Future<void> postData() async {
  try {
    var response = await DioHelper.post(
      '/posts',
      data: {
        'title': 'foo',
        'body': 'bar',
        'userId': 1,
      },
    );
    print(response.data);
  } catch (e) {
    print('Error: $e');
  }
}

4. 发起 PUT 请求

发起 PUT 请求：

import 'package:dio_helper/dio_helper.dart';

Future<void> updateData() async {
  try {
    var response = await DioHelper.put(
      '/posts/1',
      data: {
        'id': 1,
        'title': 'foo',
        'body': 'bar',
        'userId': 1,
      },
    );
    print(response.data);
  } catch (e) {
    print('Error: $e');
  }
}

5. 发起 DELETE 请求

发起 DELETE 请求：

import 'package:dio_helper/dio_helper.dart';

Future<void> deleteData() async {
  try {
    var response = await DioHelper.delete('/posts/1');
    print(response.data);
  } catch (e) {
    print('Error: $e');
  }
}

6. 使用拦截器

dio_helper 也支持拦截器，你可以在初始化时添加拦截器：

import 'package:dio_helper/dio_helper.dart';
import 'package:dio/dio.dart';

void main() {
  DioHelper.init(
    baseUrl: 'https://jsonplaceholder.typicode.com',
    interceptors: [
      InterceptorsWrapper(
        onRequest: (RequestOptions options, RequestInterceptorHandler handler) {
          // 在请求发送之前做一些处理
          print('Request: ${options.uri}');
          handler.next(options);
        },
        onResponse: (Response response, ResponseInterceptorHandler handler) {
          // 在响应返回之前做一些处理
          print('Response: ${response.data}');
          handler.next(response);
        },
        onError: (DioError e, ErrorInterceptorHandler handler) {
          // 在请求出错时做一些处理
          print('Error: ${e.message}');
          handler.next(e);
        },
      ),
    ],
  );

  runApp(MyApp());
}

7. 文件上传

dio_helper 也支持文件上传：

import 'package:dio_helper/dio_helper.dart';
import 'package:http_parser/http_parser.dart';

Future<void> uploadFile() async {
  try {
    var response = await DioHelper.upload(
      '/upload',
      filePath: '/path/to/your/file.txt',
      contentType: MediaType('text', 'plain'),
    );
    print(response.data);
  } catch (e) {
    print('Error: $e');
  }
}
回到顶部