flutter网络dio框架get请求使用总结

题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。

重要消息

网易云【玩转大前端】配套课程
EDU配套教程
flutter跨平台开发一点一滴分析系列文章系列文章在这里了

本文章将讲述
1.使用dio发送基本的get请求
2.使用dio发送get请求的传参方式
3.解析响应json数据

1 引言

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

dependencies:dio: 3.0.9

也可以访问国内pub仓库来查看 dio的最新版本。

一般添加依赖如下所示

dependencies:dio: ^3.0.9

两种写法的差别是 ^在每次 flutter pub get 是会有小版本的自动升级，不添加这个符号就不会有自动小升级

2 Dio get请求

2.1 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": "请求成功"
}

断点调试如下

2.2 Dio get 请求有参数

  ///get请求有参数///根据用户ID来获取用户信息void getRequestFunction2() async {///用户idint userId =3;///创建 dioDio dio = new Dio();///请求地址///传参方式1String url = "http://192.168.0.102:8080/getUser/$userId";///传参方式2 String url2 = "http://192.168.0.102:8080/getUser?userId=$userId";///传参方式 3String 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;/// 将响应数据解析为 UserBeanUserBean userBean = UserBean.fromJson(data);}}

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

{"code": 200,"data": {"id": 3,"userName": "测试人员","realName": "张三","age": 22},"message": "请求成功"
}

断点调试

3 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请求使用总结相关推荐

flutter网络dio框架公共请求参数、请求header使用总结
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. [x1]点击查看提示 [x2]各种系列的教程一个程序员的修炼日记本文章将讲述 1.get请求中配置公共参数 2.post请求配置公 ...
Flutter 网络请求框架dio使用详解
前言 dio是一款Flutter 网络请求框架,在GitHub上目前有超过5.9k个star.由国人(Flutter中文网)开发,所以中文文档非常完善. 这里copy了dio官方的文档,便于自己开发时 ...
flutter网络请求dio的get、post、上传文件、下载文件总结
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 重要消息 flutter中网络请求dio使用分析视频教程在这里 Flutter 从入门实践到开发一个APP之UI基础 ...
Flutter网络请求
前言在使用这些请求之前,我们需要知道它所使用的都是Flutter的网络编程模块,对此,我们就需要用到异步编程的技术,尽管我没分享这方面的编程知识,但是网上有很多资源可以借鉴. 在写这篇文章的时候,我 ...
Flutter Dio 网络接口与请求数据
Flutter Dio 网络接口与请求数据想了想,感觉没什么好说的,像什么get,post,delete,download啥的,基本插件的使用文档都有,没什么好说的,但是我们实际项目写的时候,可不能 ...
cmd怎么使用post请求’_flutter中dio的post请求方式使用总结
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 重要消息 flutter中网络请求dio使用分析视频教程在这里 Flutter 从入门实践到开发一个APP之UI基础 ...
dio设置自定义post请求_flutter中dio的post请求方式使用总结
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 重要消息 1 引言 dio用来在flutter跨平台开发中访问网络的框架,在使用的时候,我们首先是引入依赖 depen ...
06-Flutter移动电商实战-dio基础_Get_Post请求和动态组件协作
06-Flutter移动电商实战-dio基础_Get_Post请求和动态组件协作上篇文章中,我们只看到了 dio 的使用方式,但并未跟应用关联起来,所以这一篇将 dio 网络请求与应用界面结合起来, ...
Flutter 基于Dio封装网络层
实现后的效果 case 5:{try{var res = await DioManager().friend_getSelectionTopic(params: {});print('成功msg--- ...