专栏首页flutter开发中的点滴积累flutter网络dio框架get请求使用总结
原创

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

题记

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

重要消息


本文章将讲述 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 {
    ///用户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": "请求成功"
}

断点调试

在这里插入图片描述
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 中的数据解析如下图所示

在这里插入图片描述

完毕

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • flutter网络dio框架公共请求参数、请求header使用总结

    在实际应用开发中,我们会有像 token、appVersionCode 等等这些每个接口请求都需要传的参数 ,称之为公共请求参数,公共请求参数配置方式总结有三:

    早起的年轻人
  • Flutter文本标签TextTagWidget,搜索记录流式布局显示文本标签

    早起的年轻人
  • flutter的Flexible和 Expanded的区别

    不同之处是Expanded会强制填充剩余留白空间,而Flexible不会强制填充。如下图所示。

    早起的年轻人
  • AI 影响因子 9 月结果出炉,商汤科技成为最大赢家

    「AI 影响因子」是雷锋网学术频道 AI 科技评论旗下数据库项目,旨在呈现国内企业研究院学术&开发实力,为高校学生及从业者提供在会议/期刊论文、数据集比赛及开发...

    AI科技评论
  • 秒杀系统架构优化思路

    一、秒杀业务为什么难做 1)im系统,例如qq或者微博,每个人都读自己的数据(好友列表、群列表、个人信息); 2)微博系统,每个人读你关注的人的数据,一个人读多...

    架构师之路
  • 秒杀业务架构的优化之路丨58沈剑

    例如小米手机每周二的秒杀,可能手机只有1万部,但瞬时进入的流量可能是几百几千万。又例如12306抢票,票是有限的,库存一份,瞬时流量非常多,都读相同的库存。读写...

    后端技术探索
  • Postman接口测试之0基础入门教程

    Postman是用于做接口请求测试,无论是前端,后台还是测试人员,都可以用postman来测试接口,用起来非常方便。同时也是一款功能强大的网页调试与发送网页HT...

    用户6367961
  • Java六大问题你都懂了吗?

    这些问题对于认真学习java的人都要必知的,当然如果你只是初学者就没必要那么严格了,那如果你认为自己已经超越初学者了,却不很懂这些问题,请将你自己重归初...

    用户2192970
  • 每个java初学者都应该搞懂的问题

    用户1112962
  • 秒杀系统架构优化思路

    《秒杀系统架构优化思路》 上周参加Qcon,有个兄弟分享秒杀系统的优化,其观点有些赞同,大部分观点却并不同意,结合自己的经验,谈谈自己的一些看法。 一、为什么难...

    架构师之路

扫码关注云+社区

领取腾讯云代金券