【Flutter&Dart】MVVM(Model-View-ViewModel)架构模式例子-dio版本(31 /100)

动图更精彩

dio & http

在Flutter中,dio和http是两个常用的HTTP请求库,它们各有优缺点。以下是对这两个库的详细对比:

功能特性

http:

功能:提供了基本的HTTP请求和响应功能,如GET、POST、PUT、DELETE等。

易用性:API简单,易于上手。

功能丰富度:功能相对简单,没有提供拦截器、请求取消、请求日志记录等高级功能。

dio:

功能:功能强大,支持多种高级功能,如拦截器、请求取消、请求日志记录、Cookie管理、文件上传/下载、超时设置、自定义适配器等。

易用性:API相对复杂,但提供了丰富的功能和灵活的配置。

功能丰富度:功能丰富,支持多种高级功能,适合复杂的应用场景。

使用方式

http:

dart 复制代码
import 'package:http/http.dart' as http;

void httpNetwork() async {
  final client = http.Client();
  final url = Uri.parse("https://api.example.com/data");
  final response = await client.get(url);
  if (response.statusCode == 200) {
    print(response.body);
  } else {
    print(response.statusCode);
  }
}

dio:

dart 复制代码
import 'package:dio/dio.dart';

void dioNetwork() async {
  Dio dio = Dio();
  final response = await dio.get("https://api.example.com/data");
  if (response.statusCode == 200) {
    print(response.data);
  } else {
    print(response.statusCode);
  }
}

性能比较

http:平均耗时为100ms。

dio:平均耗时为80ms ,性能表现更好。

生态支持

http:

知名度:作为Flutter官方提供的库,具有很高的知名度和活跃度。

文档和社区支持:文档和社区支持完善,易于查找和学习。

dio:

知名度:也具有很高的知名度和活跃度,社区支持良好。

文档和社区支持:提供了详细的文档和示例,社区活跃度高。

结论

简单易用:如果你需要一个简单易用的HTTP请求库,可以选择http。

功能丰富:如果你需要更丰富的功能和更好的性能,可以选择dio

生态支持:http和dio在生态支持方面更加成熟,文档和社区支持完善。

代码:

dart 复制代码
// model

import 'dart:convert';

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class Result {
  String data;

  Result(this.data);
}

//ViewModel
class DioViewModel extends ChangeNotifier {
  Result? _result;
  Result? get result => _result;

  bool _isLoading = false;
  bool get isLoading => _isLoading;

  Future<void> fetchDio() async {
    _isLoading = true;
    notifyListeners();

    var url = 'https://api.apiopen.top/api/sentences';
    // url = 'https://cn.bing.com/';
    final response = await Dio().get(url);

    if (response.statusCode == 200) {
      if (response.data is String) {
        _result = Result(response.data);
      } else {
        var str = json.encode(response.data);
        _result = Result(str);
      }
    } else {
      throw Exception('Failed to load user');
    }
    _isLoading = false;
    notifyListeners();
  }
}

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

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => DioViewModel(),
      child: DioMvvmView(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Consumer<DioViewModel>(builder: (context, viewModel, child) {
          if (viewModel.isLoading) {
            return Center(
              child: CircularProgressIndicator(),
            );
          } else if (viewModel.result == null) {
            return Center(child: Text('result not found'));
          } else {
            return Text('result=${viewModel.result!.data}');
          }
        }),
        IconButton(
            onPressed: () {
              context.read<DioViewModel>().fetchDio();
            },
            icon: Icon(Icons.send))
      ],
    );
  }
}
相关推荐
文火冰糖的硅基工坊1 分钟前
[嵌入式系统-100]:常见的IoT(物联网)开发板
人工智能·物联网·架构
fanged1 小时前
天马G前端的使用
android·游戏
失散132 小时前
分布式专题——39 RocketMQ客户端编程模型
java·分布式·架构·rocketmq
许泽宇的技术分享2 小时前
当Excel遇上大语言模型:ExcelAgentTemplate架构深度剖析与实战指南
语言模型·架构·excel
杂化轨道VSEPR2 小时前
多制式基站综合测试线的架构与验证实践(3)
架构
HelloWorld__来都来了2 小时前
Agent S / Agent S2 的架构、亮点与局限
人工智能·架构
小古jy2 小时前
系统架构设计师考点——软件架构设计(架构风格!!!)
架构·系统架构
爱读源码的大都督3 小时前
为什么有了HTTP,还需要gPRC?
java·后端·架构
molong9315 小时前
Kotlin 内联函数、高阶函数、扩展函数
android·开发语言·kotlin
fakerth5 小时前
【OpenHarmony】应用文件服务模块架构
架构·操作系统·openharmony