前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter 网络操作

Flutter 网络操作

作者头像
flyou
发布2019-08-06 17:09:00
3.3K1
发布2019-08-06 17:09:00
举报
文章被收录于专栏: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的请求

代码语言:javascript
复制

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

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

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

代码语言:javascript
复制

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

代码语言:javascript
复制

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

看个例子


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

代码语言:javascript
复制

上面的代码很简单,页面上只有一个很简单的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输入的内容并且去请求服务器并返回。

代码语言:javascript
复制

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

User.dart

代码语言:javascript
复制

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

那么我们来试一下效果吧

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

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

小结


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

试一试


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

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

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

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-04-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 flutter开发者 微信公众号,前往查看

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

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 上期回顾
  • Flutter中的网络操作
  • 看个例子
  • 返回数据处理
  • 小结
  • 试一试
相关产品与服务
数据保险箱
数据保险箱(Cloud Data Coffer Service,CDCS)为您提供更高安全系数的企业核心数据存储服务。您可以通过自定义过期天数的方法删除数据,避免误删带来的损害,还可以将数据跨地域存储,防止一些不可抗因素导致的数据丢失。数据保险箱支持通过控制台、API 等多样化方式快速简单接入,实现海量数据的存储管理。您可以使用数据保险箱对文件数据进行上传、下载,最终实现数据的安全存储和提取。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档