Flutter(十九)——网络编程：HttpClient与http库

前言

不管是前端，还收后端，都涉及到网络编程的知识，在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库中是如何实现其功能的，代码如下：

扫描二维码关注公众号，回复： 9039616 查看本文章

_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库。