这是我参加更文应战的第30天，活动概况查看： 更文应战

在 Flutter 中，要说网络央求插件，不得不提 dio，并且这是国人开发的开源插件，在 pub 上好评率达到99%，GitHub 也收成了近万star。借用官方文档的一句话描绘：dio是实例化目标是什么意思一个强壮的Dart Http央求库，支撑Restful API、FormData、拦截器、央求撤销、Cookie管理、文件上传/下载、超时、自界说适配器等…能够说是覆application盖了一切涉及到的网络央求。

前期开源代码网站github预备

要开端网络央求部分了，验证接口央求是个麻烦事， 单纯的测验 CRUD 央求倒还好，能够运用 JsonPlaceholder这样的东西来完结（国内拜访有点慢）。假设JSON要弄一个无缺的 App，则需求有后端调配，要是不明白后端就麻烦了，只能有用 Mock 东实例化是什么意思西了。
作为要成为全栈的宫崎骏同学来说，怎样能Mock 就算了呢，不会写，咱还不会淘啊！GitHub 走一圈，找到了一个根据 Express.js 结构的 api 源码，是一个老外写的，看了看，发现也不太难明， 生搬硬套改呗！

Flutter入门与实战（二十二）：初次见面，网络恳求王者之dio

后台源码我现已上传了，咱们能够自行看，假设不想看的，直接按文档配置好环境， 在目录下实行一下指令 node indexAPP.js就能够启动本地服务，监听的 api 地址在：http://localhost:3900/api/。想自己改的，需求具有以下常识（努力学吧，少年！）

  • Mo宫崎骏ngoDB：后台数据库运用的是 MongoDB，采用 mong开源节流oose 完结的 MongoDB 拜访，底子的 MongoDB 操作要会，能够参阅自己的专栏：MongoDB不专业指北。
  • Javascript：JS 不会，实例化类必定玩不转，不过Dart 和 JS 很像，学起来不会怎样吃力。

你好，dio

dio 这个名字就很我国化（按拼音读你就懂了，也可能是我想歪了，原意可能是 Dart IO 的缩写吧）。dio现在最新的版别开源软件现已是4.0.0了。先来看底子的 get，post，put，pa开源tch，delete 央求的写法。
get央求

Response response;
var dio = Dio(枸杞);
responjson是什么意思se = await dio.get('/te开源矿工st?id=12&name=wendu');
print(response.data.toS开源阅览tring());
// 也能够有用 query 参数的办法央求
response = await dio.get('/test', queryParameters: {'id': 12, 'name': 'wendu'});
print(response.data.toString(appear));

post 央求

response = await dio.post('/test', da开源是什么意思ta: {'id': 12, 'name': 'wendu'});

patc实例化数组h、put 央求

var res开源操作系统ult = await Dio().patch('/tejsonst/12',appointment data: data);
var result = await Dio().put('/test/12', data: data);

delete央求

var result = await Dio().delete('/test/1实例化目标2');

运用起来也比较简略，回来的 result 会包含的 http 央求的状况码，信息，header 和照应数据，其间照应数据在 data 特色里边。

小试牛刀

之前介绍了Flutter 入门与实战（五）：来一个图文并茂的列appreciate表，之前的数据狗狗币是咱们的 Mock 数据，现在修改成从网络上开源阅览获取，接口现已预备好了，为：http://localhostjsonp跨域原理:3900/api/dynamics，支撑传入分页参数进行分页。为了简略起见，只回来了分页appear数据，没有回来分页信息。
_注：可开源软件以在后台工程目录下作业 _**_node seed.js_**_ 生成数据库数据。_
​

在 pubspec.yaml 中参加 dio 的依托：

dio: ^4.开源矿工0.0

实体类预备
为了防止有用 Map 的key 下标拜访，咱们预备一个实体类 DynamicEntit龚俊y，将 Map 数据转换为实体方针。

clasjson是什么意思s DynamicEntity {
String _title;
String _imageUrl;
int _viewCount;
String _id;
get title => _title;
get i开源操作系统mageUrl => _imageUrl;
get v实例化类iewCount => _viewCount;
get id => _id;
stat开源基金会ic DynamicEntity fromJson(Map<String, dynamic>JSON jjson文件是干什么的son) {
DynamicEntijson格局ty newEntity = DynamicEntity();
n开源是什么意思ewEntity.工程造价_id = jsoappstoren['_id'];
newEntity._title = json['title'];
newEntity._imageUrl = json['imageUrl'];
newEntity._viewCount = jsojson是什么意思n['viewCount'];
return newEntity;
}
}

接口央求开源类
新建一个接口央求类DynamicService，将动态涉及到的网络央求统一放入该类调用，里apple面的办法均界说为静态办法，防止需求实例化jsonp方针来央求，现在咱们只验证列表接口，这儿也没有做差错和失常处理。

ijson数据mport 'package:dio/dio.dart';
class DynamicService {
static String host = 'http://localhost实例化目标有几种方法:3900/api/';
static Future list(page, pageSize) asappearync {
v实例化目标是什么意思ar result = await Dio().get(
host + 'dynamics',
queryParameters: {'page': page, 'pag开源是什么意思eSize': pageSize},
);
return result;
}json是什么意思
}

修改实例化目标的关键字原有 Mock 数据为网络央求

咱们之前的Mock 数据就是仿照 APIjson 接口做的，因此换起来很便利，能够对比一下代码：

//运用Mock数据
void _requestNewItems() async {
List<Map<String, dynamic>> _jsonItems =
await DynamicMoc实例化目标有几种方法kDatajson字符串.list(_currentPage, PAGE_SIZE);
List<DynamicEntity> _newItems =
_jsonItems.map((json) =&g开源基金会t; Dynamic宫颈癌早期症状Entijson字符串ty.fromJson(json)).toList()开源我国;
this.setState(() {
if (_currentPage > 1) {
_listItems += _newItems;
} else {
_listItems = _newItems;
}
});
}
// 更换为网络央求后
void _requestNappreciateewItems() async {
var response = await DynamappetiteicService.list(_currentPage, PAGE_SIZE);公积金
Lis实例化servlet类反常t<dynamic&gtjson字符串; _jsonItems = response.data;
List<DynamicEjsonntity> _newItems =
_jsonItems.map((json) => DynamicEntity.fromJson(json)).toList();
this.setState(() {
if (_currentPage > 1) {
_listItemjson格局怎么打开s += _newItems;
} else {
_listItems = _newItems;
}
});
}

实际开发过程中，能够让 Mock 数据类和实在的接口类完结相同的接口实例化一个类，这样就能够只需求替换接口的完结类就能够了，也就是常说的面向接口编程。

跑起来

修改完结后，直接作业代码，效果如下所示，能够看到 id 现已发生了改动。
Flutter入门与实战（二十二）：初次见面，网络恳求王者之dio

总结

本篇简略介绍了 dio ，以及get 央求完结了列表数据的获取，窥一貌而知悉数，可jsonp跨域原理以看到 dio 的简略易用。后续将连续介绍其他的央求以jsonp跨域原理及更为高级的用法，来见证 dio 的强壮之处。