flutter数据请求之Dio

从Server请求数据,flutter有三种方式:

  • flutter原生HttpClient
  • flutter三方库Dio
  • 借用Android 原生获取数据

和Android native类似,flutter原生HttpClient比较弱,而且请求到的数据需要转换,所以实践中大家多不推荐使用。

借用Android原生获取数据,是指使用Android native来获取数据(例如常用的okhttp),flutter直接使用获取到数据,这是特殊场景和业务决定的。

Dio是一个强大的第三方flutter库,今天就用Dio来撸一把,请求一个免费API来获取数据,用ListView展示出来
效果图如下


效果图

step 1 :导入Dio库

在pubspec.yaml文件中depencies:下添加

  # 网络请求库
  dio: ^2.1.0

注意,yaml文件中不要随便添加空格,否则会报错。
导入Dio过程中我的项目报错了:

The current Dart SDK version is 2.1.2-dev.0.0.flutter-0a7dcf17eb.

dart版本过低,直接点击AS右上角flutter upgrade升级完了再packages get一次,大约1-2分钟就好了。

step 2 :请求数据。

核心代码

 Dio dio = new Dio();
 Response response = await dio.get(Apis.NewsApi);

就是这么简单。
其中Apis.NewsApi是一个静态的url

https://v.juhe.cn/toutiao/index?type=shishang&key=483294d5e9b2202317817d0696b47a58

为了避免误导,把请求数据的整个方法都贴上来

 ///使用Dio库获取新闻数据
  static Future<List<NewsItem>> getDioNewsItems() async{
    Dio dio = new Dio();
    Response response = await dio.get(Apis.NewsApi);
    print("Myhttp : response.data = "+ response.data.toString());
    ...
  }

数据请求是异步的过程,所以需要使用async + await。
使用print输出我们请求的结果如下:

{
    reason: 成功的返回,
    result: {
        stat: 1,
        data: [
            {
                uniquekey: f88d72157c503080eb2775051f18e901,
                title: 上了年纪女人穿衣搭配不能盲目跟风,聪明女人都在穿这样的连衣裙,
                date: 2019-07-0723: 16,
                category: 时尚,
                author_name: 穿搭那些事,
                url: http: //mini.eastday.com/mobile/190707231633202.html,
                thumbnail_pic_s: http: //09imgmini.eastday.com/mobile/20190707/20190707231633_53c82b5c3ab6af3947719462bd555b72_4_mwpm_03200403.jpg,
                thumbnail_pic_s02: http: //09imgmini.eastday.com/mobile/20190707/20190707231633_53c82b5c3ab6af3947719462bd555b72_1_mwpm_03200403.jpg,
                thumbnail_pic_s03: http: //09imgmini.eastday.com/mobile/20190707/20190707231633_53c82b5c3ab6af3947719462bd555b72_7_mwpm_03200403.jpg
            },
  ...

step 3 : 处理数据。

  • 首先从response中取出数据
 Map<dynamic,dynamic> dataMap = response.data;

"dynamic"类似于java中的泛型,可以对应所有的数据类型,无论是基本数据类型还是自定义类。这一步其实可以简写成

 Map dataMap = response.data;

其实如果仔细看上面我们打印出来的日志就会发现有点不对劲,日志并不是json格式。因为Dio已经把json解析成了Map<dynamic,dynamic> 格式,但是Dio也只能帮我们到这里了,毕竟她不是Gson能一步到位给我们解析成对应的对象,下面的处理还要靠我们自己。

  • 其次处理数据格式。这一步我们要一层层处理dataMap中的数据了。
    (1) 处理属性“reason”和“result”
class NewsAllBean{

  NewsAllBean(String reason, Map<String,dynamic> result){
    this.reason = reason;
    this.result = result;
    transformNewsData(result);
  }
  String reason;
  Map result;
  NewsData newsData; 
  
  //Map 映射成NewsData
  void transformNewsData(Map<String , dynamic> map){
    this.newsData = NewsData(map['stat'], map['data']);
  }
}

属性"reason"类型是String, 属性“ result” 类型是Map<dynamic, dynamic>这都是好理解的,NewsData是啥?是result对应的类。NewsData的属性就是result的Key

(2)处理result的各个属性,并且将result映射成一个对象。

class NewsData{

  NewsData(String stat,List<dynamic>data){
    this.stat = stat;
    this.data = data;
    transformItems(data);
  }

  String stat;
  List data;
  List<NewsItem> dataNews;

  //List data映射成List<NewsItem>
  void transformItems(List<dynamic> list){

    this.dataNews = list.map((i)=>NewsItem.fromMapJson(i)).toList();
  }


}

NewsData属性中有个List,Dio将其解析成List<dynamic> 类型,那么为了将其映射成我们想要的 List<NewsItem>类型,需要遍历这个List<dynamic>了

(3)NewsItem。最基本的类了

///具体的每一条新闻的内容
class NewsItem {
  NewsItem(
      {this.uniquekey,
      this.title,
      this.date,
      this.category,
      this.author_name,
      this.url,
      this.thumbnail_pic_s});

  String uniquekey; //":"779e0448503ff134fef798f81170b008",
  String title; //":"亚足联:2023年亚洲杯将由中国承办",
  String date; //":"2019-06-04 17:06",
  String category; //":"头条",
  String author_name; //":"央视网",
  String url; //":"http:\/\/mini.eastday.com\/mobile\/190604170654219.html",
  String
      thumbnail_pic_s; //":"http:\/\/05imgmini.eastday.com\/mobile\/20190604\/20190604170654_6fb492fbe34b25ca811121c7a7ea3c56_1_mwpm_03200403.jpg"

  static NewsItem fromMapJson(Map<String, dynamic> mapjson) {
    return NewsItem(
        uniquekey: mapjson['uniquekey'],
        title: mapjson['title'],
        date: mapjson['date'],
        category: mapjson['category'],
        author_name: mapjson['author_name'],
        url: mapjson['url'],
        thumbnail_pic_s: mapjson['thumbnail_pic_s']);
  }
}

至此,我们完成了数据请求与数据解析。

使用数据

使用数据的过程比较easy,有兴趣可以直接看代码newsGet.dart
Demo地址
欢迎留言交流~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容