Flutter核心技术与实战
陈航
美团点评高级技术专家
立即订阅
6150 人已学习
课程目录
已完结 47 讲
0/4登录后,你可以任选4讲全文学习。
课前必读 (3讲)
开篇词 | 为什么每一位大前端从业者都应该学习Flutter?
免费
01 | 预习篇 · 从0开始搭建Flutter工程环境
02 | 预习篇 · Dart语言概览
Flutter开发起步 (3讲)
03 | 深入理解跨平台方案的历史发展逻辑
04 | Flutter区别于其他方案的关键技术是什么?
05 | 从标准模板入手,体会Flutter代码是如何运行在原生系统上的
Dart语言基础 (3讲)
06 | 基础语法与类型变量:Dart是如何表示信息的?
07 | 函数、类与运算符:Dart是如何处理信息的?
08 | 综合案例:掌握Dart核心特性
Flutter基础 (13讲)
09 | Widget,构建Flutter界面的基石
10 | Widget中的State到底是什么?
11 | 提到生命周期,我们是在说什么?
12 | 经典控件(一):文本、图片和按钮在Flutter中怎么用?
13 | 经典控件(二):UITableView/ListView在Flutter中是什么?
14 | 经典布局:如何定义子控件在父容器中排版的位置?
15 | 组合与自绘,我该选用何种方式自定义Widget?
16 | 从夜间模式说起,如何定制不同风格的App主题?
17 | 依赖管理(一):图片、配置和字体在Flutter中怎么用?
18 | 依赖管理(二):第三方组件库在Flutter中要如何管理?
19 | 用户交互事件该如何响应?
20 | 关于跨组件传递数据,你只需要记住这三招
21 | 路由与导航,Flutter是这样实现页面切换的
Flutter进阶 (17讲)
22 | 如何构造炫酷的动画效果?
23 | 单线程模型怎么保证UI运行流畅?
24 | HTTP网络编程与JSON解析
25 | 本地存储与数据库的使用和优化
26 | 如何在Dart层兼容Android/iOS平台特定实现?(一)
27 | 如何在Dart层兼容Android/iOS平台特定实现?(二)
28 | 如何在原生应用中混编Flutter工程?
29 | 混合开发,该用何种方案管理导航栈?
30 | 为什么需要做状态管理,怎么做?
31 | 如何实现原生推送能力?
32 | 适配国际化,除了多语言我们还需要注意什么?
33 | 如何适配不同分辨率的手机屏幕?
34 | 如何理解Flutter的编译模式?
35 | Hot Reload是怎么做到的?
36 | 如何通过工具链优化开发调试效率?
37 | 如何检测并优化Flutter App的整体性能表现?
38 | 如何通过自动化测试提高交付质量?
Flutter综合应用 (6讲)
39 | 线上出现问题,该如何做好异常捕获与信息采集?
40 | 衡量Flutter App线上质量,我们需要关注这三个指标
41 | 组件化和平台化,该如何组织合理稳定的Flutter工程结构?
42 | 如何构建高效的Flutter App打包发布环境?
43 | 如何构建自己的Flutter混合开发框架(一)?
44 | 如何构建自己的Flutter混合开发框架(二)?
结束语 (1讲)
结束语 | 勿畏难,勿轻略
特别放送 (1讲)
特别放送 | 温故而知新,与你说说专栏的那些思考题
Flutter核心技术与实战
登录|注册

24 | HTTP网络编程与JSON解析

陈航 2019-08-22
你好,我是陈航。
在上一篇文章中,我带你一起学习了 Dart 中异步与并发的机制及实现原理。与其他语言类似,Dart 的异步是通过事件循环与队列实现的,我们可以使用 Future 来封装异步任务。而另一方面,尽管 Dart 是基于单线程模型的,但也提供了 Isolate 这样的“多线程”能力,这使得我们可以充分利用系统资源,在并发 Isolate 中搞定 CPU 密集型的任务,并通过消息机制通知主 Isolate 运行结果。
异步与并发的一个典型应用场景,就是网络编程。一个好的移动应用,不仅需要有良好的界面和易用的交互体验,也需要具备和外界进行信息交互的能力。而通过网络,信息隔离的客户端与服务端间可以建立一个双向的通信通道,从而实现资源访问、接口数据请求和提交、上传下载文件等操作。
为了便于我们快速实现基于网络通道的信息交换实时更新 App 数据,Flutter 也提供了一系列的网络编程类库和工具。因此在今天的分享中,我会通过一些小例子与你讲述在 Flutter 应用中,如何实现与服务端的数据交互,以及如何将交互响应的数据格式化。

Http 网络编程

我们在通过网络与服务端数据交互时,不可避免地需要用到三个概念:定位、传输与应用。
其中,定位,定义了如何准确地找到网络上的一台或者多台主机(即 IP 地址);传输,则主要负责在找到主机后如何高效且可靠地进行数据通信(即 TCP、UDP 协议);而应用,则负责识别双方通信的内容(即 HTTP 协议)。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《Flutter核心技术与实战》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(21)

  • 给我点阳光就灿烂
    如何进行socket通信

    作者回复: 可以参考cnDart社区的文章:http://www.cndartlang.com/841.html

    2019-08-22
    1
    3
  • 和小胖
    第一个问题解决方法:
    dio.interceptors.add(InterceptorsWrapper(
          onRequest: (Options options) async {
            if (options.headers['token'] == null) {
              print("no token,request token firstly...");
              //lock the dio.
              dio.lock();
              return new Dio().get("http://xxxx.com/token").then((d) {
                options.headers["token"] = d.data['token'];
                print("request token succeed, value: " + d.data['token']);
                print(
                    'continue to perform request:path:${options.path},baseURL:${options.path}');
                return options;
              }).whenComplete(() => dio.unlock()); // unlock the dio
            }
            return options;
          }
      ));

    作者回复: 厉害👍

    2019-10-09
    1
  • Mr.Zhou
    请问下在json和model转换过程中,如果想把json的key作为一个属性的值,json的value作为另一个属性的值,应该如何操作呢。

    作者回复: 用for in就好了
    for (var key in map.keys) {
         obj.x = key;
         obj.y = map[key];
    }

    2019-10-02
    1
  • 江宁彭于晏
    分享一个json转dart类的工具,理解了原理后,实际项目中可以省不少时间https://javiercbk.github.io/json_to_dart/

    作者回复: 赞👍

    2019-09-11
    1
  • Geek_0d3a08
    重定向监听有吗?

    作者回复: Dio默认会自动帮你重定向,你可以在options参数里面把followRedirects置为false,自己在拦截器中处理重定向

    2019-08-29
    1
  • 安南寸暖🤕
    json_model 怎么生成纯数组的解析代码?

    作者回复: 参考官方文档吧https://github.com/flutterchina/json_model

    2019-11-07
  • 和小胖
    第二道题解决方法:

    class Student {
      String id;
      String name;
      int score;
      List<Teacher> teachers;

      Student({this.id, this.name, this.score, this.teachers});

      factory Student.fromJson(Map<String, dynamic> parsedJson) {
        return Student(
            id: parsedJson['id'],
            name: parsedJson['name'],
            score: parsedJson['score'],
            teachers: getTeacher(parsedJson['teachers']));
      }

      static List<Teacher> getTeacher(dynamic list) {
        List<Teacher> teachers = new List();
        list.forEach((f) {
          teachers.add(Teacher.fromJson(f));
        });
        return teachers;
      }
    }

    class Teacher {
      String name;
      int age;

      Teacher({this.age, this.name});

      factory Teacher.fromJson(Map<String, dynamic> parsedJson) {
        return Teacher(name: parsedJson['name'], age: parsedJson['age']);
      }
    }

    作者回复: 👍厉害

    2019-10-09
  • 大神博士
    想问下 Flutter 中 JSONP 的请求怎么处理

    作者回复: 1.直接发url请求就可以了、把服务端返回的数据当作字符串简单处理下,把它转成json格式
    2.flutter不需要处理跨域问题,不建议用jsonp这种奇怪的格式

    2019-09-21
    1
  • 米米呀👧
    import 'dart:convert';

    import 'package:flutter/material.dart';
    import 'package:http/http.dart' as http;
    [...]
      loadData() async {
        String dataURL = "https://jsonplaceholder.typicode.com/posts";
        http.Response response = await http.get(dataURL);
        setState(() {
          widgets = JSON.decode(response.body);
        });
      }
    }

    官网Demo里面是用的这个,跟HttpClient有什么区别?我该用哪个?

    作者回复: 这个就是今天分享说的http包啊

    2019-09-10
  • Geek_joestar
    static List<Teacher> fromJsonList(List<dynamic> listJson){
        var list = List<Teacher>();
        for(Map<String, dynamic> parsedJson in listJson) {
          list.add(Teacher.fromJson(parsedJson));
        }
        return list;
      }

    作者回复: 赞

    2019-09-08
  • C
    class Teacher {
      String name;
      int age;

      Teacher({this.name, this.age});

      factory Teacher.fromJson(Map<String, dynamic> parsedJson) {
        return Teacher(
          name: parsedJson['name'],
          age: parsedJson['age'],
        );
      }

      static List<Teacher> parseTeachers(List<dynamic> mapList) {
        List<Teacher> teachers = List<Teacher>();
        for(Map<String, dynamic> map in mapList) {
          teachers.add(Teacher.fromJson(map));
        }
        return teachers;
      }
    }

    class Student {
      String id;
      String name;
      int score;
      List<Teacher> teachers;

      Student({this.id, this.name, this.score, this.teachers});

      factory Student.fromJson(Map<String, dynamic> parsedJson) {
        return Student(
          id: parsedJson['id'],
          name: parsedJson['name'],
          score: parsedJson['score'],
          teachers: Teacher.parseTeachers(parsedJson['teachers']),
        );
      }
    }

    作者回复: 很赞👍

    2019-09-06
  • 大和
    dio.interceptors.add(InterceptorsWrapper(
            onRequest: (RequestOptions options) async {
              if (options.headers["token"] == null) {
                try {
                  var token = await new Dio().get("https://xxx.com/token");
                  options.headers["token"] = token;
                }catch(e) {
                  return dio.reject("Error: 请先登录...");
                }
              }
              return options;
            }
        ));

    作者回复: 思路是对的,有一个小点可以改进:如果此刻有多个request同时发出,token会请求多次。

    2019-09-04
  • 宁缺
    请问老大,课后作业的答案啥时候给参考一下

    作者回复: 会考虑专门出一节讲课后题的解决思路

    2019-09-03
  • Geek_0793f1
    使用这种方式,我们需要先将 JSON 字符串传递给 JSON.decode 方法解析成一个 Map,然后把这个 Map 传给自定义的类,进行相关属性的赋值。

    前端一般把json字符串解析成map之后,就直接用这个map进行相关的属性赋值了,老师能解释一下,传给自定义类的做法的好处吗?

    作者回复: 以对象的方式承接服务端返回的JSON字典,不仅更直观,也避免了一些因为key写错出现的代码错误。js的类型系统比较混乱,object和字典是可以混用的,比如下面这段代码:
    var x = {'number':123,'title':'title'};
    x.number和x['number']是等价的,所以这也就是为什么前端同学直接拿字典就可以当对象用了。
    而Dart是强类型语言,字典里的键值对和对象的属性是不能混用的,所以我们需要定义一层映射关系。

    2019-09-02
  • 使用Dio发送post请求,data数据是map,但是服务端接收不到,请问老师这是什么原因?

    作者回复: 确认下网络权限,查查状态码,最后还不行可以抓包看看原因

    2019-09-02
  • 大恒数据
    请问json如何解析泛型?

    作者回复: 手动没法解析,可以运行时判断类型,走特定类型的解析方法

    2019-08-28
  • ls
    还是不大理解 await 和 async,当发起网络请求的时候,不会阻塞主线程吗。当调用 async 的函数时,是另外起了一个线程去等待网络请求返回?这个异步怎么理解好。

    作者回复: 网络请求和I/O是另一个平行世界(操作系统)里并发完成的,flutter只是触发了他们的启动而已

    2019-08-24
  • 吴小安
    这个反射引起的安全问题在移动端和前端现在有解决?

    作者回复: 在可用性和安全的综合衡量下,一般是采用类的黑名单,避免反序列化有安全风险的类

    2019-08-23
  • 右手边
    老师您好,JSON 的解析确实有点复杂了,真的没有类似Gson那样方便的库么?

    作者回复: 运行时的没有,有一些开发期的IDE插件可以简化JSON解析的代码

    2019-08-22
    1
  • 许童童
    习惯了用js直接获取属性,这样先定义模型确实会更废时间一些,但先定义模型其实会更规范、出bug更容易调试,也要求开发人员不能随便变更数据结构。
    2019-08-22
收起评论
21
返回
顶部