Flutter网络请求管理插件dio_api_manager的使用

发布于 1周前 作者 yibo5220 来自 Flutter

Flutter网络请求管理插件dio_api_manager的使用

dio_api_manager 管理您的 API 调用。

特性

  • 只需在应用程序中设置一次 API 基本 URL。
  • 支持 HTTP 方法:GET、POST。
  • 支持 API 调用中的原始 JSON。
  • 支持多部分 API 调用。
  • 从其 URL 下载图像,并返回下载路径。
  • 打印 API 调用的日志信息,如 URL、参数、头部、文件参数。
  • 您可以禁用日志打印。
  • 与 MVC 结构易于使用。
  • 每次 API 调用时检查互联网连接。
  • 以简单 JSON 响应处理服务器宕机或 API 不工作的错误。

额外信息

  • 您的 API 响应必须为 JSON 格式。

开始使用

pubspec.yaml 文件中添加依赖并运行 Pub get

dependencies:
  dio_api_manager: 0.0.5

在类文件中导入包:

import 'package:dio_api_manager/dio_api_manager.dart';

使用方法

如果 API 响应成功,则函数将返回三个键:tagName, errorjsonResponse

如果发生错误(例如无网络或服务器错误),则返回 tagName, errormessage

初始化 DioApiManager

void main() {
  DioApiManager.initApiManager(
    // bearer 认证头带令牌格式
    // authorization: {"Authorization" : 'Bearer $bearerToken'},

    // 基本认证头带用户名和密码
    authorization: {"Authorization": 'Basic ' + base64.encode(utf8.encode("yourUsername:yourPassword"))},
    baseURL: "https://demo.com/api/v1/",
    printDebugLogs: true
  );
}

发起 GET 请求

Future funcGetAllStudent() async {
  return await DioApiManager.callWebservice(
    varMethodType: enumMethodType.GET, // 枚举方法类型
    strSuffixPath: "getAllStudent",
    dictParameters: {"class": "1"},
  );
}

发起 POST 请求

Future funcPostAllStudent() async {
  return await DioApiManager.callWebservice(
    varMethodType: enumMethodType.POST, // 枚举方法类型
    strSuffixPath: "getAllStudent",
    dictParameters: {"class": "1"},
    isRawJson: true // 设置为 true 表示发送原始 JSON 数据
  );
}

发起带有文件上传的 POST 请求

Future funcUpdateProfileAPICall() async {
  return await DioApiManager.callWebservice(
    varMethodType: enumMethodType.POST, // 枚举方法类型
    strSuffixPath: "updateProfile",
    dictParameters: {"id": "1", "name": "xyz"},
    arrayUploadFile: ModelUploadFile(name: "profileImage", xFile: 'file', xFileName: "profiledp.png")
  );
}

下载图像

String downloadedPath = await DioApiManager.funcDownLoadFile(imageURL: "your image url in string");

示例代码

import 'dart:convert';
import 'package:dio_api_manager/dio_api_manager.dart';
import 'package:example/ModelStudent.dart';
import 'package:example/StudentController.dart';
import 'package:example/Utility.dart';
import 'package:flutter/material.dart';

void main() {
  DioApiManager.initApiManager(
    // bearer 认证头带令牌格式
    // authorization: {"Authorization" : 'Bearer $bearerToken'},

    // 基本认证头带用户名和密码
    authorization: {"Authorization": 'Basic ' + base64.encode(utf8.encode("yourUsername:yourPassword"))},
    baseURL: "https://demo.com/api/v1/",
    printDebugLogs: true
  );

  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DioApiManager',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  StudentController studentController = StudentController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("DioApiManager demo"),
      ),
      body: FutureBuilder<dynamic>(
        future: studentController.funcGetAllStudent(),
        builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
          switch (snapshot.connectionState) {
            case ConnectionState.waiting:
              return Utility.funcLoaderFuture();

            default: {
              if (snapshot.hasError) {
                return Utility.funcFutureBuilderError(isInternetCheck: true, onTryAgain: () {
                  setState(() {});
                });
              } else {
                print(snapshot.data);

                if (snapshot.data['error'] == true) {
                  return Utility.funcFutureBuilderError(isInternetCheck: false, onTryAgain: () {
                    setState(() {});
                  });
                } else {
                  try {
                    studentController.modelStudent = ModelStudent.fromJson(snapshot.data['jsonResponse']);
                  } catch (_) {
                    // 处理 JSON 到模型转换错误,如数据类型转换错误或空类型错误
                    return Utility.funcFutureBuilderError(isInternetCheck: false, onTryAgain: () {
                      setState(() {});
                    });
                  }
                  return ListView.builder(
                    itemCount: studentController.modelStudent.studentData!.length,
                    itemBuilder: (context, index) {
                      return Padding(
                        padding: const EdgeInsets.fromLTRB(15, 10, 15, 10),
                        child: Text(studentController.modelStudent.studentData![index].studentName!),
                      );
                    },
                  );
                }
              }
            }
          }
        },
      ),
    );
  }
}

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

1 回复

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


当然,以下是关于如何在Flutter项目中使用dio_api_manager插件进行网络请求管理的代码案例。dio_api_manager是一个基于dio库的轻量级网络请求管理插件,它可以帮助你更方便地管理API请求、缓存和错误处理。

首先,确保你的Flutter项目中已经添加了dio_api_manager依赖。在pubspec.yaml文件中添加以下依赖:

dependencies:
  flutter:
    sdk: flutter
  dio: ^4.0.0 # 确保dio版本与dio_api_manager兼容
  dio_api_manager: ^x.y.z # 替换为最新版本号

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

接下来,你需要配置dio_api_manager。以下是一个基本的配置和使用示例:

1. 配置dio_api_manager

创建一个新的Dart文件,例如api_manager.dart,来配置dio_api_manager

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

class ApiManager {
  ApiManager._();

  static final ApiManager _instance = ApiManager._();

  static ApiManager get instance => _instance;

  late DioApiManager _dioApiManager;

  Future<void> init() async {
    // 创建dio实例
    final Dio dio = Dio(
      BaseOptions(
        baseUrl: 'https://api.example.com', // 替换为你的API基础URL
        connectTimeout: 10000,
        receiveTimeout: 10000,
        sendTimeout: 10000,
      ),
    );

    // 配置dio_api_manager
    _dioApiManager = DioApiManager(
      dio: dio,
      interceptors: [
        // 你可以添加自定义拦截器,例如日志拦截器
        LogInterceptor(
          responseBody: true,
          requestBody: true,
          requestHeaders: true,
          responseHeaders: true,
        ),
      ],
      errorHandle: (error, options) {
        // 自定义错误处理
        if (error.response != null) {
          print('Error Response: ${error.response!.data}');
        } else {
          print('Error Message: ${error.message}');
        }
        return Future.error(error);
      },
    );

    // 注册API接口
    _dioApiManager.registerApi({
      'getUser': '/user/{id}', // 示例API接口
      'postComment': '/post/{postId}/comment',
    });
  }

  // 获取dio实例进行API请求
  Dio get dio => _dioApiManager.dio;

  // 调用API接口
  Future<dynamic> getUser(int id) async {
    final Map<String, dynamic> params = {'id': id};
    return _dioApiManager.request('getUser', params: params);
  }

  Future<dynamic> postComment(int postId, String content) async {
    final Map<String, dynamic> data = {'content': content};
    final Map<String, dynamic> params = {'postId': postId};
    return _dioApiManager.request('postComment', data: data, params: params, method: 'POST');
  }
}

2. 使用ApiManager进行网络请求

在你的Flutter组件或业务逻辑中使用ApiManager进行网络请求:

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late ApiManager apiManager;
  String? userData;

  @override
  void initState() {
    super.initState();
    apiManager = ApiManager.instance;
    apiManager.init().then((_) {
      // 发起网络请求
      apiManager.getUser(1).then((response) {
        setState(() {
          userData = response.toString();
        });
      }).catchError((error) {
        print('Error fetching user data: $error');
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('dio_api_manager Example'),
        ),
        body: Center(
          child: Text(userData ?? 'Loading...'),
        ),
      ),
    );
  }
}

在这个示例中,我们创建了一个ApiManager类来配置和管理我们的网络请求。我们注册了两个API接口:getUserpostComment,并在MyApp组件中通过apiManager实例发起了一个GET请求来获取用户数据。

这个示例展示了如何使用dio_api_manager进行基本的网络请求管理。你可以根据需要扩展这个示例,例如添加更多的API接口、配置缓存、处理更多的错误情况等。

回到顶部