【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 小时前
Android 原生定位(替代高德 / 百度等三方定位)<终极版本>
android
蓝倾2 小时前
京东商品属性API数据解析:颜色、尺寸与材质
api·fastapi
2501_916008892 小时前
iOS 抓包工具有哪些?全面盘点主流工具与功能对比分析
android·ios·小程序·https·uni-app·iphone·webview
2501_915921432 小时前
iOS混淆工具实战 视频流媒体类 App 的版权与播放安全保护
android·ios·小程序·https·uni-app·iphone·webview
qb2 小时前
vue3.5.18源码-编译-入口
前端·vue.js·架构
CYRUS_STUDIO2 小时前
LLVM 全面解析:NDK 为什么离不开它?如何亲手编译调试 clang
android·编译器·llvm
CYRUS_STUDIO2 小时前
静态分析神器 + 动态调试利器:IDA Pro × Frida 混合调试实战
android·逆向
milanyangbo4 小时前
“卧槽,系统又崩了!”——别慌,这也许是你看过最通俗易懂的分布式入门
分布式·后端·云原生·架构
失散134 小时前
分布式专题——1.1 Redis单机、主从、哨兵、集群部署
java·数据库·redis·分布式·架构
2301_779503764 小时前
MySQL集群高可用架构---mysql高可用之组复制 (MGR)
数据库·mysql·架构