flutter中dio网络get请求使用总结

flutter中网络请求dio使用分析 视频教程在这里

Flutter 从入门实践到开发一个APP之UI基础篇 视频

Flutter 从入门实践到开发一个APP之开发实战基础篇

flutter跨平台开发一点一滴分析系列文章系列文章 在这里了

1 添加依赖

dio用来在flutter跨平台开发中访问网络的框架，在使用的时候，我们首先是引入依赖

dependencies:

dio: ^3.0.9

2 Dio get 请求无参数

//get请求无参数

void getRequestFunction1() async {

///创建Dio对象

Dio dio = new Dio();

///请求地址 获取用户列表

String url = "http://192.168.0.102:8080/getUserList";

///发起get请求

Response response = await dio.get(url);

///响应数据

var data = response.data;

setState(() {

result = data.toString();

});

}

数据响应结果

{

"code": 200,

"data": [

{

"id": 3,

"userName": "测试人员",

"realName": "张三",

"age": 22

}

],

"message": "请求成功"

}

断点调试如下

3 Dio get 请求有参数

在上述代码中，传参方式1与传参方式2是在请求链接中拼接参数，请求方式3是将参数放在一个 map 中，然后通过 Dio 的queryParameters 来配制参数，上述返回的数据结构为

{

"code": 200,

"data": {

"id": 3,

"userName": "测试人员",

"realName": "张三",

"age": 22

},

"message": "请求成功"

}

断点调试

4 请求到的json数据解析

对于这里使用到的数据模型 UserBean 对象来说

class UserBean{

String userName;

String realName;

int age;

int id;

static UserBean fromJson(Map rootData){

///解析第一层

Map data = rootData["data"];

///解析第二层

UserBean userBean = new UserBean();

userBean.id = data["id"];

userBean.age = data["age"];

userBean.userName= data["userName"];

userBean.realName = data["realName"];

return userBean;

}

}

对于 UserBean 中的数据解析如下图所示