搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 我的大前端生涯 > flutter中dio网络get请求使用总结

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

我的大前端生涯 2020-06-12
  • 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 请求有参数

  
    
    
  
///get请求有参数
///根据用户ID来获取用户信息
void getRequestFunction2() async {
///用户id
int userId =3;
///创建 dio
Dio dio = new Dio();
///请求地址
///传参方式1
String url = "http://192.168.0.102:8080/getUser/$userId";
///传参方式2
String url2 = "http://192.168.0.102:8080/getUser?userId=$userId";
///传参方式 3
String url3 = "http://192.168.0.102:8080/getUser";

Map<String,dynamic> map = Map();
map["userId"]= userId;
///发起get请求
Response response = await dio.get(url3,queryParameters: map);

///响应数据
Map<String,dynamic> data = response.data;
/// 将响应数据解析为 UserBean
UserBean userBean = UserBean.fromJson(data);
}

}

在上述代码中,传参方式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<String,dynamic> rootData){
///解析第一层
Map<String,dynamic> 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 中的数据解析如下图所示

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《flutter中dio网络get请求使用总结》的版权归原作者「我的大前端生涯」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注我的大前端生涯微信公众号

我的大前端生涯微信公众号:qing-chen-yi-ke

我的大前端生涯

手机扫描上方二维码即可关注我的大前端生涯微信公众号

我的大前端生涯最新文章

精品公众号随机推荐