前言
不管是前端,还收后端,都涉及到网络编程的知识,在Flutter开发中也不例外,所以我们有必要掌握Flutter怎么请求网络。
比如在Android开发中,有各种的网络库:OkHttp,Vollery,HttpClient,HttpUrlConnection等,其实在Flutter开发中也有这样的请求库:HttpClient以及Http库。
HttpClient
首先,我们来先介绍一下做为Dart语言自带的网络请求库HttpClient,作为一个开发移动端程序的程序员来说,都知道网络请求都不能在UI主线程中进行,不然会造成界面卡顿,所以这里我们也要结合Dart语言的异步请求,来讲解网络请求。
GET请求
在网络请求之中,有get请求与post请求的分别,这里属于网络协议的知识,属于基础这里不在讲解,不懂的可以专门购买网络协议的知识,我们直接来看看它的用法:
String _textString=""; _getUrlText() async{ HttpClient client=new HttpClient(); HttpClientRequest request=await client.getUrl(Uri.parse("https://www.baidu.com/index.php?tn=monline_3_dg")); request.headers.add("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:70.0) Gecko/20100101 Firefox/70.0"); HttpClientResponse response=await request.close(); _textString=await response.transform(Utf8Decoder()).join(); print(_textString); client.close(); }
这里我们定义了一个HttpClient,设置了其请求的页面,也设置了其请求头User-Agent,然后返回了其字符串,并且给打印了出来,代码很简单,在HttpClient库中,常规的get网络请求就是如此了,唯一需要注意的地方就是记得使用close方法关闭。
POST请求
在网络请求之中,有时候也需要传入特定的参数且不被发现参数的具体值,这个时候就需要考虑使用Post请求来获取数据,使用的代码如下所示:
_postUrlText() async{ HttpClient client=HttpClient(); HttpClientRequest request=await client.postUrl(Uri.parse("https://www.baidu.com/index.php?tn=monline_3_dg")); request.headers.set("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:70.0) Gecko/20100101 Firefox/70.0"); Map jsonMap={'username':'liyuanjinglyj','password':'ssssssssssssssssss'};//设置请求参数 request.add(utf8.encode(json.encode(jsonMap))); HttpClientResponse response=await request.close(); _textString=await response.transform(Utf8Decoder()).join(); print(_textString); client.close(); }
POST请求基本上和Get差不多,除了将client.getUrl换成了client.postUrl,以及设置其请求参数的设置,当然项目中,这里肯定需要捕获异常,博主为了方便讲解,省去了那些代码,让代码直观一点。
http库
在Flutter开发中,除了HttpClient库之外,还可以使用官方推荐的http库,因为其包含了一些非常方便的函数,可以让我们更方便的访问网络,获取资源,同时http库还支持手机端和PC端,功能真心很强大,不过在使用之前,我们需要在pubspec.yaml里添加http库,代码如下:
dependencies: http: ^0.12.0//这句是添加 flutter: sdk: flutter
GET请求
为了对比一下http库与HttpClient使用两者的使用区别,我们直接改变一下上面的get请求,看看http库中是如何实现其功能的,代码如下:
_http_getUrlText() async{ var client=http.Client(); var uri=Uri.parse("https://www.baidu.com/index.php?tn=monline_3_dg"); http.Response response=await client.get(uri); print(utf8.decode(response.bodyBytes)); client.close(); }
代码很直观明了,唯一需要注意的是记得用utf8.decode方法把网页获取的内容进行转码,否则返回的就是乱码。
POST请求
同样,我们改变一下HttpClient的Post请求,用http库实现看看,代码如下:
_http_postUrlText() async{ var client=http.Client(); Map<String,String> headerMap={'username':'liyuanjinglyj','password':'ssssssssssssssssss'}; http.Response response=await client.post("https://www.baidu.com/index.php?tn=monline_3_dg",headers: headerMap,body: {}); print(utf8.decode(response.bodyBytes)); client.close(); }
为什么Post的请求会变成这样呢?你不妨点击编译器进去看一下Post方法源码,代码如下:
Future<Response> post(url, {Map<String, String> headers, body, Encoding encoding});
这个方法传入了3个参数:headers,body和encoding,我们可以根据项目的实际需求来更改其参数。
Flutter的网络请求就讲到这里,代码都不是很长,理解起来也简单,不过,既然官方推荐我们使用http库,项目中就尽量都使用http库。