Flutter开发之——网络请求-HttpClient

发表于 分类于 ， ， 阅读时长 ≈ 3 分钟

一 概述

  • HttpClient是Flutter中默认的网络访问工具
  • HttpClient可以分别对get和post请求使用get、getUrl和post、postUrl方法
  • 本文仅对HttpClient进行简单介绍，后见将介绍其他网络请求框架

二 网络请求中的几个类

flutter中网络请求的过程

2.1 HttpClient

  • 执行网络请求的客户端
  • 实例化时通过var httpClient = new HttpClient();
  • 可以发送get请求(get/getUrl)和post请求(post/postUrl)

2.2 Uri

1
2
3
4
5
6
7
8
9
10
factory Uri(
      {String? scheme,
      String? userInfo,
      String? host,
      int? port,
      String? path,
      Iterable<String>? pathSegments,
      String? query,
      Map<String, dynamic /*String|Iterable<String>*/ >? queryParameters,
      String? fragment}) = _Uri;
  • scheme：如网络请求时为http或https，文件请求时为file
  • userInfo：权限组件的用户信息部分，此部分默认为空
  • host：主机部分，不区分大小写
  • port：端口号，http请求时为80，https请求时为443
  • path：接口请求路径(方法)
  • pathSegments：同path，只不过将path分段了
  • queryParameters：请求参数
  • query：同queryParameters，将queryParameters合并成一个
1
2
3
4
5
var uri = Uri(
        scheme: 'https',
        host: 'www.wanandroid.com',
        path: '/user/login',
        queryParameters: {'username': 'wanandroidUser1', 'password': '123456'});

2.3 HttpClientRequest

添加请求信息

  • request.persistentConnection：支持请求的持久连接状态(默认true)
  • request.headers：请求头
  • request.cookies：cookies

2.4 HttpClientResponse

客户端连接的HTTP响应

  • response.statusCode：状态码

三 请求接口

玩Android 开放API-登录

登录用户信息

  • url：https://www.wanandroid.com/user/login
  • username：wanandroidUser1
  • password：123456

四 示例

4.1 分开请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
void _httpClientPost1() async {
    var httpClient = new HttpClient();
    var uri = Uri(
        scheme: 'https',
        host: 'www.wanandroid.com',
        path: '/user/login',
        queryParameters: {'username': 'wanandroidUser1', 'password': '123456'});

    // var uri2=Uri.https('www.wanandroid.com', '/user/login',{'username': 'wanandroidUser1', 'password': '123456'});

    HttpClientRequest request = await httpClient.postUrl(uri);
    HttpClientResponse response = await request.close();
    String responseBody = await response.transform(utf8.decoder).join();
    setState(() {
      _data = responseBody;
    });
    print(responseBody);
  }

4.2 链式请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
void _httpClientPost2() {
    var httpClient = new HttpClient();
    var uri = Uri(
        scheme: 'https',
        host: 'www.wanandroid.com',
        path: '/user/login',
        queryParameters: {'username': 'wanandroidUser1', 'password': '123456'});

    // var uri2=Uri.https('www.wanandroid.com', '/user/login',{'username': 'wanandroidUser1', 'password': '123456'});
    httpClient.postUrl(uri).then((HttpClientRequest request) {
      return request.close();
    }).then((HttpClientResponse response) async {
      String responseBody = await response.transform(utf8.decoder).join();
      setState(() {
        _data = responseBody;
        print(responseBody);
      });
    });
  }

3.3 设置显示

1
2
String _data;
body: Center(child: Text("$_data"),),

4.4 效果图

1
I/flutter (13964): {"data":{"admin":false,"chapterTops":[],"coinCount":0,"collectIds":[],"email":"","icon":"","id":99295,"nickname":"wanandroidUser1","password":"","publicName":"wanandroidUser1","token":"","type":0,"username":"wanandroidUser1"},"errorCode":0,"errorMsg":""}

五 参考

  • Flutter-HttpClient class