专栏首页flutter开发者Flutter 网络操作

Flutter 网络操作

上期回顾


在前面的文章中我们在Flutter中的本地存储,我们可以将用户的数据存储在移动设备上,但是当用户清空设备或者更换设置这些用户存储的信息就会面临丢失的问题。那么,我们就不得不考虑将用户的信息存储一个第三方的地方,没错就是服务器。

那么,今天我们就来看下Flutter中的网络操作。

Flutter中的网络操作


跟前面讲到的本地存储操作一样,Flutter给我们提供了第三发库的支持,同样的下面三个操作

  1. 打开项目的pubspec.yaml配置我文件在dependencies:节点下新增如下配置 http: ^0.11.3+16
  2. 点击开发工具提示的packages get按钮或者在命令行输入flutter packages get来同步第三方插件
  3. 在自己的Dart文件中引入插件即可正常使用了 import ‘package:http/http.dart’ as http

然后我们可以在我们代码中执行如如操作就可以完成http的请求

当然它同样支持,get、delete、head、path、put、read等请求。

在上面的请求中我们直接使用http.post()方法便直接给我们返回了一个泛型为Response的Future对象。很好,这个库已经帮我们做好了网络请求的异步操作和异常捕获,所以说我们直接使用就可以了。

如果您向同一服务器发出多个请求,则可以通过使用客户端而不是发出一次性请求来保持打开持久连接。如果您这样做,请务必在完成后关闭客户端:

同样的这个库同样支持你自定义自己的HTTPClient

好吧,接下来,我们来看个例子看看用起来在怎么样

看个例子


我们以github获取用户信息为例来看下http库的用法

上面的代码很简单,页面上只有一个很简单的RaisedButton,当用户点击时便会触发上,上面的httpGet方法。

httpGet方法里面会调用http的get请求,请求github api,使用then来接收正常的返回信息,使用catchError来接受异常的信息,当请求完成时会触发whenComplete

下面还是来看下效果吧:

点击按钮后控制台输出:

I/flutter (13613): 请求开始 I/flutter (13613): 请求结果:{“login”:”flyou”,”id”:6630762,”avatar_url”:”https://avatars1.githubusercontent.com/u/6630762?v=4","gravatar_id":"","url":"https://api.github.com/users/flyou"………} I/flutter (13613): 请求完成

上面请求的返回结果比较长,就不全部贴出来了哈

现在我们断开手机的网络来重新试一下:

I/flutter (13613): 请求开始 I/flutter (13613): 请求出错:SocketException: Failed host lookup: ‘api.github.com’ (OS Error: No address associated with hostname, errno = 7) I/flutter (13613): 请求完成

嗯,和我们的预期一样,现在它走了catchError的回调。

返回数据处理


现在我们使用的接口后台返回的一半都是Json的形式,所以我们也仅仅对json数据的处理做下介绍。

在Flutter中默认已经为我们提供了convert库来处理json字符串的转换

我们可以使用json.encode()或者json.decode()方法来序列化或者反序列化json字符。

好吧,还是来举个例子,还是跟上面的一样请求github api获取用户信息,但是这次我们根据用户输入的用户名来获取用户信息,并且把返回的用户信息合理的显示在屏幕上。

初始化的界面是这样样子的。

界面很简单,最上面一个image,下面是几个ListTitle,在下面就是一个TextField,最下面就是就是一个RaisedButton了。

当我们点击RaisedButton时就会获取TextField输入的内容并且去请求服务器并返回。

对了,在上面的代码中还用到了一个User对象,这是需要自己定义的用来存储接口返回信息的。

User.dart

可以发现User类里面很简单,只是定义了几个我们需要的属性,然后通过 定义fromJson方法把值赋值给相应的属性(对Json数据格式不熟悉的童鞋自己去google看下哈)

那么我们来试一下效果吧

当然在使用服务端反悔的数据的时候需要执行判空操作哦

当然,大家也可以在用户点击按钮时弹出dialog提示再请求完成时去除dialog显示,这个例子比较丑大家明白怎么使用就ok啦。

小结


  • http请求也是耗时操作,需要使用Future
  • 使用 hhtp库可以很方便的实现手机端的网络请求
  • 使用json可以很方便的序列化或者反序列化json

试一试


大家在下面可以按照上面的提示做一下Post请求,或者给请求增加header

点击左下角阅读原文,体验更佳阅读效果

我怀疑这个是个坏掉的二维码,分享到朋友圈试试?

本文分享自微信公众号 - flutter开发者(Flutter_Developers),作者:flyou

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-04-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【译】Flutter beta 2 Now

    没错,就在今天Flutter宣布发布了Flutter的第二个测试版本(V0.2.8),借助它可以帮助开发者在更快的时间内创建高质量的IOS和Android应用。

    flyou
  • Flutter状态管理

    在前面的文章中我们学习了Flutter中事件传递的方法,让我们可以在数据流向简单的业务场景中使用InheritedWidget、Notification 或者 ...

    flyou
  • 进度组件ProgressIndicator

    在前面的文章中我们介绍了很多Flutter中的Widget,但是确实还有很多Widget没有介绍到,当然我们会在以后用的时候来做说明的,今天我们就来介绍下Flu...

    flyou
  • Http_load压力测试工具 原

        尝试过Spring的jmeter,不过好像有点难驾驭,测个文件url还行,但带个参数就各种问题不断了。

    尚浩宇
  • “中国”制造 | 悍马(Hummer)病毒家族技术分析报告

    文章原创作者: 猎豹移动安全实验室 自2016年年初开始,猎豹移动安全实验室对印度top 10的手机样本进行了梳理,结果发现这些病毒样本存在家族关系,这些病毒样...

    FB客服
  • 低成本安全硬件实战遇到的那些事

    世界属于终端 世界属于Linux 世界属于算法 楔子 今年二月份,通过@ya0guang大神的文章我初步接触到了安全硬件低成本调教的姿势,我将跟随ya0guan...

    FB客服
  • 关于“入侵检测”的一些想法

    离开长沙的时候写了一篇文章“左右互博:站在攻击者的角度来做防护”(freebuf上可以找到),一晃已经是三年了。这三年接触了很多东西,自己也有过很多想法,但实际...

    FB客服
  • 谈谈如何优雅的关闭正在运行中的Spark Streaming的流程序

    我是攻城师
  • 数据库相关总结

    通用: http://db-engines.com/en/ranking MySQL MySQL: http://www.mysql.com/ MySQL参考:...

    用户1221057
  • 杨老师课堂之Excel VBA 程序开发第六讲根据部门列创建工作表

    方式1:本节课件下载地址:链接: https://pan.baidu.com/s/1rf5pRmZ95fjVbz70KYi6Aw 密码: q9yk

    杨校

扫码关注云+社区

领取腾讯云代金券