Flutter 网络请求王者 Dio 简介

本文涉及的产品
云数据库 MongoDB,通用型 2核4GB
简介: 窥一貌而知全部,作为网络请求框架, dio不仅简单易用。而且还具备强大的高级功能。本篇对dio做了基本的介绍以及获取列表数据的示例。
在 Flutter 中,要说网络请求插件,不得不提 dio,而且这是国人开发的开源插件,在 pub 上好评率达到99%,GitHub 也收获了近万star。借用官方文档的一句话描述:dio是一个强大的Dart Http请求库,支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时、自定义适配器等...可以说是覆盖了所有涉及到的网络请求。

前期准备

要开始网络请求部分了,验证接口请求是个麻烦事, 单纯的测试 CRUD 请求倒还好,可以使用 JsonPlaceholder这样的工具来完成(国内访问有点慢)。如果要弄一个完整的 App,则需要有后端搭配,要是不懂后端就麻烦了,只能实用 Mock 工具了。
作为要成为全栈的同学来说,怎么能Mock 就算了呢,不会写,咱还不会淘啊!GitHub 走一圈,找到了一个基于 Express.js 框架的 api 源码,是一个老外写的,看了看,发现也不太难懂, 生搬硬套改呗!

生搬硬套

后台源码我已经上传了,大家可以自行看,如果不想看的,直接按文档配置好环境, 在目录下执行一下命令 node index.js就可以启动本地服务,监听的 api 地址在:http://localhost:3900/api/。想自己改的,需要具备以下知识(努力学吧,少年!)

  • MongoDB:后台数据库使用的是 MongoDB,采用 mongoose 实现的 MongoDB 访问,基本的 MongoDB 操作要会。
  • Javascript:JS 不会,肯定玩不转,不过Dart 和 JS 很像,学起来不会怎么费劲。

你好,dio

dio 这个名字就很中国化(按拼音读你就懂了,也可能是我想歪了,原意可能是 Dart IO 的缩写吧)。dio目前最新的版本已经是4.0.6了。先来看基本的 get,post,put,patch,delete 请求的写法。
get请求

Response response;
var dio = Dio();
response = await dio.get('/test?id=12&name=wendu');
print(response.data.toString());
// 也可以实用 query 参数的方式请求
response = await dio.get('/test', queryParameters: {'id': 12, 'name': 'wendu'});
print(response.data.toString());

post 请求

response = await dio.post('/test', data: {'id': 12, 'name': 'wendu'});

patch、put 请求

var result = await Dio().patch('/test/12', data: data);
var result = await Dio().put('/test/12', data: data);

delete请求

var result = await Dio().delete('/test/12');

使用起来也比较简单,返回的 result 会包括的 http 请求的状态码,信息,header 和响应数据,其中响应数据在 data 属性里面。

小试牛刀

之前介绍了Flutter 图文并茂的列表实现,之前的数据是我们的 Mock 数据,现在修改成从网络上获取,接口已经准备好了,为:http://localhost:3900/api/dynamics,支持传入分页参数进行分页。为了简单起见,只返回了分页数据,没有返回分页信息。
注:可以在后台工程目录下运行 **_node seed.js_** 生成数据库数据。

在 pubspec.yaml 中加入 dio 的依赖:

dio: ^4.0.6

实体类准备
为了避免实用 Map 的key 下标访问,我们准备一个实体类 DynamicEntity,将 Map 数据转换为实体对象。

class DynamicEntity {
  String _title;
  String _imageUrl;
  int _viewCount;
  String _id;

  get title => _title;
  get imageUrl => _imageUrl;
  get viewCount => _viewCount;
  get id => _id;

  static DynamicEntity fromJson(Map<String, dynamic> json) {
    DynamicEntity newEntity = DynamicEntity();
    newEntity._id = json['_id'];
    newEntity._title = json['title'];
    newEntity._imageUrl = json['imageUrl'];
    newEntity._viewCount = json['viewCount'];

    return newEntity;
  }
}

接口请求类
新建一个接口请求类DynamicService,将动态涉及到的网络请求统一放入该类调用,里面的方法均定义为静态方法,避免需要实例化对象来请求,目前我们只验证列表接口,这里也没有做错误和异常处理。

import 'package:dio/dio.dart';

class DynamicService {
  static String host = 'http://localhost:3900/api/';
  static Future list(page, pageSize) async {
    var result = await Dio().get(
      host + 'dynamics',
      queryParameters: {'page': page, 'pageSize': pageSize},
    );

    return result;
  }
}

修改原有 Mock 数据为网络请求

我们之前的Mock 数据就是仿照 API 接口做的,因此换起来很方便,可以对比一下代码:

//使用Mock数据
void _requestNewItems() async {
    List<Map<String, dynamic>> _jsonItems =
        await DynamicMockData.list(_currentPage, PAGE_SIZE);
    List<DynamicEntity> _newItems =
        _jsonItems.map((json) => DynamicEntity.fromJson(json)).toList();
    this.setState(() {
      if (_currentPage > 1) {
        _listItems += _newItems;
      } else {
        _listItems = _newItems;
      }
    });
  }

// 更换为网络请求后
void _requestNewItems() async {
    var response = await DynamicService.list(_currentPage, PAGE_SIZE);
    List<dynamic> _jsonItems = response.data;
    List<DynamicEntity> _newItems =
        _jsonItems.map((json) => DynamicEntity.fromJson(json)).toList();
    this.setState(() {
      if (_currentPage > 1) {
        _listItems += _newItems;
      } else {
        _listItems = _newItems;
      }
    });
  }

实际开发过程中,可以让 Mock 数据类和真实的接口类实现相同的接口,这样就可以只需要替换接口的实现类就可以了,也就是常说的面向接口编程

跑起来

修改完成后,直接运行代码,效果如下所示,可以看到 id 已经发生了改变。
屏幕录制2021-06-30 下午9.44.44.gif

总结

本篇简单介绍了 dio ,以及get 请求完成了列表数据的获取,窥一貌而知全部,可以看到 dio 的简单易用。后续将陆续介绍其他的请求以及更为高级的用法,来见证 dio 的强大之处。


欢迎关注个人公众号:岛上码农

相关实践学习
MongoDB数据库入门
MongoDB数据库入门实验。
快速掌握 MongoDB 数据库
本课程主要讲解MongoDB数据库的基本知识,包括MongoDB数据库的安装、配置、服务的启动、数据的CRUD操作函数使用、MongoDB索引的使用(唯一索引、地理索引、过期索引、全文索引等)、MapReduce操作实现、用户管理、Java对MongoDB的操作支持(基于2.x驱动与3.x驱动的完全讲解)。 通过学习此课程,读者将具备MongoDB数据库的开发能力,并且能够使用MongoDB进行项目开发。 &nbsp; 相关的阿里云产品:云数据库 MongoDB版 云数据库MongoDB版支持ReplicaSet和Sharding两种部署架构,具备安全审计,时间点备份等多项企业能力。在互联网、物联网、游戏、金融等领域被广泛采用。 云数据库MongoDB版(ApsaraDB for MongoDB)完全兼容MongoDB协议,基于飞天分布式系统和高可靠存储引擎,提供多节点高可用架构、弹性扩容、容灾、备份回滚、性能优化等解决方案。 产品详情: https://www.aliyun.com/product/mongodb
相关文章
|
2月前
|
消息中间件 Kubernetes 网络协议
Cilium 系列 -15-7 层网络 CiliumNetworkPolicy 简介
Cilium 系列 -15-7 层网络 CiliumNetworkPolicy 简介
|
3月前
|
消息中间件 NoSQL Linux
workFlow c++异步网络库编译教程与简介
搜狗公司C++服务器引擎,编程范式。支撑搜狗几乎所有后端C++在线服务,包括所有搜索服务,云输入法,在线广告等,每日处理数百亿请求。这是一个设计轻盈优雅的企业级程序引擎,可以满足大多数后端与嵌入式开发需求。 编程范式 结构化并发与任务隐藏回调与内存回收机制
52 0
|
14天前
|
数据采集 网络协议 API
python中其他网络相关的模块和库简介
【4月更文挑战第4天】Python网络编程有多个流行模块和库,如requests提供简洁的HTTP客户端API,支持多种HTTP方法和自动处理复杂功能;Scrapy是高效的网络爬虫框架,适用于数据挖掘和自动化测试;aiohttp基于asyncio的异步HTTP库,用于构建高性能Web应用;Twisted是事件驱动的网络引擎,支持多种协议和异步编程;Flask和Django分别是轻量级和全栈Web框架,方便构建不同规模的Web应用。这些工具使网络编程更简单和高效。
|
1月前
|
缓存 网络协议 网络虚拟化
网络技术基础(15)——DHCP简介与配置
【3月更文挑战第3天】刚加完班又去南京出差了,实在是太忙了。。。。网络基础笔记(加班了几天,中途耽搁了,预计推迟6天),这篇借鉴了之前师兄的笔记。
|
6月前
|
网络协议 程序员 API
[笔记] Microsoft Windows网络编程《一》WinSock简介(四)
[笔记] Microsoft Windows网络编程《一》WinSock简介(四)
|
2月前
|
网络协议 物联网 Linux
WireGuard 系列文章(五):Netmaker 简介 - 创建和管理 WireGuard 网络的平台
WireGuard 系列文章(五):Netmaker 简介 - 创建和管理 WireGuard 网络的平台
|
8月前
|
数据可视化 算法 数据库
GUI、多线程编程、网络编程简介
GUI 是 Graphical User Interface 的缩写,含义为图形用户界面。它是一种计算机操作界面,通过图形、图标和视觉化元素与用户进行交互。相比于命令行界面(CLI),GUI 提供了更直观、更易用的方式让用户与计算机系统进行交互。
90 0
|
4月前
|
Kubernetes Linux Docker
容器网络简介
容器网络简介
|
4月前
|
网络虚拟化 虚拟化 云计算
云计算——网络虚拟化简介
云计算——网络虚拟化简介
107 0
|
4月前
|
机器学习/深度学习 人工智能 算法
深度学习及CNN、RNN、GAN等神经网络简介(图文解释 超详细)
深度学习及CNN、RNN、GAN等神经网络简介(图文解释 超详细)
168 1