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

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

通过使用 dio_base_helper 插件，可以更方便和简洁地进行网络请求。以下是一些简单的示例，展示如何使用 dio_base_helper。

网络请求示例

GET 请求
import 'dart:convert';
import 'package:dio_base_helper/dio_base_helper.dart';
import 'package:flutter/material.dart';

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

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

  @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
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List dataList = [];

  Future<void> fetchListData() async {
    final dioBaseHelper = DioBaseHelper("www.api.com");
    await dioBaseHelper
        .onRequest(methode: METHODE.get, endPoint: "/list")
        .then((value) => {
              dataList.add(json.decode(value)),
            })
        .onError((ErrorModel error, stackTrace) => {
              debugPrint("Error Status code: ${error.statusCode}"),
            });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: dataList.map((e) => Text("$e")).toList(),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => fetchListData(),
        tooltip: 'Fetch Data',
        child: const Icon(Icons.add),
      ),
    );
  }
}
POST 请求
Future<void> uploadImage() async {
  final dioBaseHelper = DioBaseHelper("www.api.com",
      token:
          "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiI4NTU4NTc0ODAwNSIsImlhdCI6MTY3OTEwOTQ2MiwiZXhwIjo0Njc5MTA5NDYyfQ.cisPc85Tdw6FvRVhg8Uyj4Pmt6_-Kz9XkR7c8Xm9J44");
  XFile? file = await ImagePicker().pickImage(source: ImageSource.gallery);
  if (file != null) {
    debugPrint("file: ${file.path}");
    await dioBaseHelper
        .onRequestFormData(
          showBodyInput: true,
          isDebugOn: true,
          formData: {
            "image": await MultipartFile.fromFile(file.path),
            "tag": "profile",
          },
          endPoint: "/upload-image",
          isAuthorize: true,
        )
        .then((value) => {
              debugPrint("value$value"),
            })
        .onError((ErrorModel error, stackTrace) => {
              debugPrint("Error Status code: ${error.statusCode}"),
            });
  }
}
使用字节上传图片
Future<void> uploadImageWithBytes() async {
  final dioBaseHelper = DioBaseHelper("www.api.com",
      token:
          "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIyIiwianRpIjoiN2JkMmVhNjkxN2M4YTMwYjkxYTcxMzY5MmE5ZmY2ODAwMmJjZGE5NmU5MzIzNGRiNzI3NTFjYmJjNjU4MDY4YzA3OGE1Nzg3Y2ViMjYxYjgiLCJpYXQiOjE2Nzg4NDc3ODYuMDQ4ODY2LCJuYmYiOjE2Nzg4NDc3ODYuMDQ4ODcsImV4cCI6MTcxMDQ3MDE4Ni4wMzczMDEsInN1YiI6Ijg1MSIsInNjb3BlcyI6WyIqIl19.uOQGVd8MT1EelrToeiK7yuE-y4ey2nNmXZ-If4STcuelfe9LryU99Co0sMLbmZoKimp3I3Z2XVCWNe2IanUtYxfNlaI7yULrhjiltko5Rrv7App-iQbBnuA2b5eKqI6wLppz5bmStc9oHrhdWAgk6qpKNbz5yndwvQ5t0ayjqzFdbqtsunWtTdnYpdXeYnJ1IeckcBU8yrGqeAC_QZ3VpyqkqZv-7NLLs-amK8LCIbO88xoUvsIDMOjZRJIdRh7pe7J--iGbSjjMyesFuyyYcEOUJPg37Qu9ugVmjWO6kgqf0NhP_qZikJqf1phUJsxqwmOGSXHS5Yp7gHr8NGJpQpBmSh0fFncnyisuek4UgUevtAS5h32fJC8tVwdvBOxfzhKxIVxqYjDyUC86w22rETRYv4yVSK0DiREc61uP_BX7XkupkChR-_hieE_tFt1Htzg0qW49EkG0Gag954ToCUOMXaatCaBcAWm0KO35ry95_GVm2sak-4SHZQPqFFeC50PsXgFWnxNdEEEa2OeAngj_5vJQPvxxrSeVFwIchcIXMSErtC4bH5xe9KdGFjEHBee4u-JeHuIKRhXbGkcqUrN4B8n2ipqsHePN43z4aJMMKQC7PXAQGgAk7_V7Gszmsu_EkVJ-15JR3pHzUafq0xURGw-rC47_0qqozU2UKRw");
  XFile? xfile = await ImagePicker().pickImage(source: ImageSource.gallery);

  if (xfile != null) {
    final file = File(xfile.path).readAsBytesSync();
    String base64String = "data:image/png;base64,${base64Encode(file)}";
    // debugPrint("file: ${xfile.path}");
    await dioBaseHelper
        .onRequestFormData(
          showBodyInput: true,
          isDebugOn: true,
          formData: {
            "image": base64String,
            "receiver": 946674133,
            "template_name": "abc",
          },
          endPoint: "/create-template",
          isAuthorize: true,
        )
        .then((value) => {
              debugPrint("value$value"),
            })
        .onError((ErrorModel error, stackTrace) => {
              debugPrint("Error Status code: ${error.statusCode}"),
            });
  }
}

所有方法请求

// for get request
Method.get
// for post request
Method.post
// for put request
Method.put
// for delete request
Method.delete

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

1 回复

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


当然，下面是一个关于如何在Flutter项目中使用dio_base_helper插件来进行网络请求的示例代码。dio_base_helper是一个基于dio库的扩展，用于简化和统一网络请求的处理。

首先，确保你已经在pubspec.yaml文件中添加了dio和dio_base_helper的依赖：

dependencies:
  flutter:
    sdk: flutter
  dio: ^4.0.4  # 请检查最新版本号
  dio_base_helper: ^0.2.0  # 请检查最新版本号

然后，运行flutter pub get来获取这些依赖。

接下来，在你的Flutter项目中配置dio_base_helper。通常，你会在一个单独的文件中设置它，比如network_config.dart：

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

class NetworkConfig {
  static final BaseOptions options = BaseOptions(
    baseUrl: 'https://api.example.com', // 替换为你的API基础URL
    connectTimeout: 5000,
    receiveTimeout: 3000,
    sendTimeout: 3000,
  );

  static final Dio dio = Dio(options);

  static final DioHelper dioHelper = DioHelper(dio: dio);
}

然后，你可以创建一个服务类来封装你的API请求。例如，假设你有一个用户API，你可以创建一个UserService类：

import 'package:dio_base_helper/dio_base_helper.dart';
import 'package:flutter/material.dart';
import 'network_config.dart';

class UserService {
  final DioHelper _dioHelper;

  UserService() : _dioHelper = NetworkConfig.dioHelper;

  // 获取用户信息
  Future<Map<String, dynamic>> getUserInfo(String userId) async {
    try {
      Response response = await _dioHelper.get('/users/$userId');
      return response.data;
    } catch (e) {
      throw e;
    }
  }

  // 创建用户
  Future<Map<String, dynamic>> createUser(Map<String, dynamic> userData) async {
    try {
      Response response = await _dioHelper.post('/users', data: userData);
      return response.data;
    } catch (e) {
      throw e;
    }
  }
}

在你的Flutter应用中，你可以使用这个服务类来进行网络请求。例如，在一个简单的按钮点击事件中：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final UserService _userService = UserService();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Dio Base Helper Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            try {
              Map<String, dynamic> userInfo = await _userService.getUserInfo('1');
              print(userInfo);
            } catch (e) {
              print('Error: $e');
            }
          },
          child: Text('Get User Info'),
        ),
      ),
    );
  }
}

这个示例展示了如何使用dio_base_helper进行GET和POST请求。你可以根据API的需求扩展这个服务类，添加更多的请求方法。

请确保在实际项目中处理错误和异常，并根据API的响应格式调整数据解析逻辑。

回到顶部