当前位置：首页 > article >正文

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

article 2025/1/20 18:41:48

动图更精彩

在这里插入图片描述

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

代码：

// 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))
      ],
    );
  }
}