【FlutterDart】MVVM（Model-View-ViewModel）架构模式例子-dio版本（31 /100）

动图更精彩

在这里插入图片描述

dio & http

在Flutter中，dio和http是两个常用的HTTP请求库，它们各有优缺点。以下是对这两个库的详细对比：
功能特性

http：

功能：提供了基本的HTTP请求和响应功能，如GET、POST、PUT、DELETE等。
易用性：API简单，易于上手。
功能丰富度：功能相对简单，没有提供拦截器、请求取消、请求日志记录等高级功能。

dio：

功能：功能强大，支持多种高级功能，如拦截器、请求取消、请求日志记录、Cookie管理、文件上传/下载、超时设置、自定义适配器等。
易用性：API相对复杂，但提供了丰富的功能和灵活的配置。
功能丰富度：功能丰富，支持多种高级功能，适合复杂的应用场景。
使用方式
http：

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：

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在生态支持方面更加成熟，文档和社区支持完善。

代码：

// modelimport '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});@overrideWidget build(BuildContext context) {return ChangeNotifierProvider(create: (context) => DioViewModel(),child: DioMvvmView(),);}
}class DioMvvmView extends StatelessWidget {const DioMvvmView({super.key});@overrideWidget 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))],);}
}