Flutter网络请求插件flutter_network_layer_dio的使用

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

Flutter网络请求插件flutter_network_layer_dio的使用

1. 整理后的内容中关于“Flutter网络请求插件flutter_network_layer_dio的使用”的完整示例demo

import 'package:flutter_network_layer_dio/flutter_network_layer_dio.dart';

void main() async {
  final INetworkInvoker networkInvoker = DioNetworkInvoker(onLog: _onLog);
  await AppNetworkManager.networkInvoker.init('https://jsonplaceholder.typicode.com');

  final request = RequestUser(id: 1);
  final response = await networkInvoker.request(request);

  response.when(
    success: (response) {
      print('DATA: ${response.data}');
    },
    error: (error) {
      print('ERROR: ${error.message}');
    },
  );
}

abstract final class AppNetworkManager {
  static final INetworkInvoker networkInvoker =
      DioNetworkInvoker(onLog: _onLog);

  static void _onLog(NetworkLog log) {
    print('[${log.type}] ${log.message}');
  }
}

final class ResponseUser extends JsonResponseModel {
  const ResponseUser({
    required this.id,
    required this.name,
  });

  const ResponseUser.empty()
      : id = 0,
        name = '';

  final int id;
  final String name;

  @override
  ResponseUser fromJson(dynamic json) {
    assert(json is Map<String, dynamic>, 'json is not a Map&lt;String, dynamic&gt;');
    final map = json as Map<String, dynamic>;

    return ResponseUser(
      id: map['id'] as int,
      name: map['name'] as String,
    );
  }

  @override
  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
    };
  }

  @override
  String toString() =>.toJson().toString();
}

final class RequestUser extends RequestCommand<ResponseUser> {
  RequestUser({required this.id});

  final int id;

  @override
  String get path => '/users/$id';

  @override
  ResponseUser get sampleModel => const ResponseUser.empty();
}

2. 关于“Flutter网络请求插件flutter_network_layer_dio的使用”的内容解释

标题:Flutter Network Layer

flutter_network_layer_dio

  • 提供了网络层的实现,使用了Dio包。因此,包括了定义在网络层中的Dio包。
  • Table of Contents
    • General Information
      • 使用该包的流程:
        1. 创建自己的ResponseModel来定义响应类型(例如GetTodoResponse)。
        2. 创建自己的RequestCommand来定义请求属性(例如method, url path, headers, payload等)。
        3. 创建一个INetworkInvoker对象从该包的一个实现(例如DioNetworkInvoker)。强烈推荐使用get_it来创建单例实例。
        4. 在业务逻辑中,创建一个RequestCommand对象并发送给INetworkInvoker对象以获取响应。

Class Diagram

Class Diagram

Command Pattern Like Request Management

  • 此包使用与命令模式类似的架构来管理请求。
  • 每个请求都是可以作为INetworkInvoker接口的request方法参数执行的命令。
  • 请求命令可以通过实现RequestCommand类来创建。RequestCommand类包含描述请求的字段,如HTTP请求方法、请求头、负载等。 请求通过执行INetworkInvokerrequest方法发送到服务器。

Implementation with Dio

  • Dio是一个强大的Dart/Flutter项目HTTP客户端。此包提供了名为DioNetworkInvokerINetworkInvoker接口的实现。

Features

  • 模块化且易于插拔的架构。
  • 命令模式类似请求管理。
  • 易于与依赖注入框架集成,如get_it
  • 日志触发函数用于与产品级别的日志集成。

Use in Your Project

  • Tests: 测试在test目录中演示如何使用网络层。example应用是一个简单的Dart程序,使用此包从服务器获取数据。
  • Example Project: example_flutter_dio是使用flutter_network_layer_dio的好例子,展示了如何在Flutter项目中使用它。此示例还包括get_it来创建INetworkInvoker的单例实例。在示例中,使用了logger包作为日志器,并将DioNetworkInvokeronLog函数设置为接收此包的日志。

Steps to Use the Network Layer

  1. 将网络模块添加为项目的pubspec.yaml文件中的依赖项。
  2. 创建自己的响应模型(例如ResponseUser)。
  3. 创建自己的请求模型(命令),例如RequestUser
  4. 最后,您可以使用名为DioNetworkInvoker的网络调用器向服务器发送请求。以下示例演示如何向服务器发送请求并处理响应。

Listen the Logs of the Package

  • 包提供了一个日志触发函数用于与产品级别的日志集成。可以通过调用NetworkModule类的setLoggingTrigger函数来设置日志触发函数。

Dio Interceptors

  • Dio拦截器可以通过传递它们作为DioNetworkInvoker类构造函数的参数来添加到网络调用器。当init方法被调用时,它们会被添加到Dio实例。有关拦截器的更多信息,请参阅Dio文档。

License

MIT License

Copyright © 2025 Faruk Emre

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


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

1 回复

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


当然,下面是一个使用Flutter网络请求插件flutter_network_layer_dio的示例代码。这个插件结合了dio库来简化网络请求的处理。

首先,确保在你的pubspec.yaml文件中添加依赖项:

dependencies:
  flutter:
    sdk: flutter
  flutter_network_layer_dio: ^x.y.z  # 请将x.y.z替换为最新版本号

然后运行flutter pub get来获取依赖项。

接下来,让我们编写一个示例应用,展示如何使用flutter_network_layer_dio进行网络请求。

1. 创建网络数据模型

假设我们有一个API返回用户信息,我们定义一个数据模型来表示用户信息:

class User {
  final int id;
  final String name;
  final String email;

  User({required this.id, required this.name, required this.email});

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'] as int,
      name: json['name'] as String,
      email: json['email'] as String,
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
      'email': email,
    };
  }
}

2. 配置网络层

lib目录下创建一个新的文件network_service.dart,并配置网络层:

import 'package:dio/dio.dart';
import 'package:flutter_network_layer_dio/flutter_network_layer_dio.dart';
import 'package:your_app_name/models/user.dart'; // 替换为你的User模型文件路径

class NetworkService {
  final NetworkLayer _networkLayer;

  NetworkService({required BaseOptions dioOptions})
      : _networkLayer = NetworkLayer(dioOptions: dioOptions);

  Future<User?> getUser(int userId) async {
    final response = await _networkLayer.get('/users/$userId');
    if (response.isSuccessful) {
      return User.fromJson(response.data!);
    } else {
      throw Exception('Failed to fetch user: ${response.message}');
    }
  }
}

3. 使用网络服务

在你的主应用文件中(例如main.dart),初始化并使用NetworkService

import 'package:flutter/material.dart';
import 'package:your_app_name/network_service.dart'; // 替换为你的network_service文件路径
import 'package:your_app_name/models/user.dart'; // 替换为你的User模型文件路径

void main() {
  const baseOptions = BaseOptions(
    baseUrl: 'https://jsonplaceholder.typicode.com/', // 替换为你的API基础URL
  );

  final networkService = NetworkService(dioOptions: baseOptions);

  runApp(MyApp(networkService: networkService));
}

class MyApp extends StatelessWidget {
  final NetworkService networkService;

  MyApp({required this.networkService});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Network Layer DIO Example'),
        ),
        body: Center(
          child: FutureBuilder<User?>(
            future: networkService.getUser(1), // 请求用户ID为1的用户信息
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                if (snapshot.hasError) {
                  return Text('Error: ${snapshot.error}');
                } else if (snapshot.data == null) {
                  return Text('No data');
                } else {
                  final user = snapshot.data!;
                  return Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Text('ID: ${user.id}'),
                      Text('Name: ${user.name}'),
                      Text('Email: ${user.email}'),
                    ],
                  );
                }
              } else {
                return CircularProgressIndicator();
              }
            },
          ),
        ),
      ),
    );
  }
}

在这个示例中,我们定义了一个User数据模型,并配置了一个NetworkService类来处理网络请求。在主应用文件中,我们使用FutureBuilder来显示从API获取的用户信息。

请确保将示例中的your_app_name替换为你的实际项目名称,并相应地调整API基础URL。

回到顶部