文章系列
Flutter Dio源码分析(一)–Dio介绍
Flutter Dio源码分析(二)–HttpClient、Http、Dio对比
Flutter Dio源码分析(三)–深度剖析
Flutter Dio源码分析(四)–封装
视频系列
Flutter Dio源码分析(一)–Dio介绍视频教程
Flutter Dio源码分析(二)–HttpClient、Http、Dio对比视频教程
Flutter Dio源码分析(三)–深度剖析视频教程
Flutter Dio源码分析(四)–封装视频教程
源码仓库地址
github仓库地址
前言
在前文中我们对Dio进行了基本介绍，也写了一个简单的示例，今天我们继续来讲一下Flutter 网络请求的三种请求方式的对比，以达到更好理解Dio网络请求库的目的。
系统自带网络请求HttpClient
步骤一：创建一个HttpClient
1
| HttpClient httpClient = HttpClient();
|
步骤二：打开http连接,设置请求头
1
| HttpClientRequest request = await httpClient.getUrl(Uri.parse("http://localhost:8080/getUserInfo"));
|
1
| request.headers.add("token", "123456");
|
步骤四：等待连接服务器
1
| HttpClientResponse response = await request.close();
|
步骤五：读取响应内容
1
2
| // 响应流数据以utf8编码格式返回
String responseBody = await response.transform(utf8.decoder).join();
|
步骤六：请求结束,关闭httpClient
完整示例代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| import 'dart:convert';
import 'dart:io';
import 'package:flutter/material.dart';
class HttpClientExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
void _getUserInfo() async {
try {
// 1. 创建httpClient
HttpClient httpClient = HttpClient();
// 2. 打开http连接,设置请求头
HttpClientRequest request = await httpClient.getUrl(Uri.parse("http://localhost:8080/getUserInfo"));
// 3. 通过HttpClientRequest可以设置请求header
request.headers.add("token", "123456");
// 4. 等待连接服务器
HttpClientResponse response = await request.close();
// 5. 读取响应内容
String responseBody = await response.transform(utf8.decoder).join();
// 6. 请求结束,关闭httpClient
httpClient.close();
print(responseBody);
} catch (e) {
print(e);
}
}
return Scaffold(
appBar: AppBar(
title: Text("DioExample"),
),
body: Center(
child: Column(
children: [
TextButton(
onPressed: _getUserInfo,
child: Text("发送get请求"),
)
],
),
),
);
}
}
|
第三方网络请求库Http
步骤一：添加依赖
1
2
| dependencies:
http: ^0.13.3 #latest version
|
步骤二：导入库
1
| import 'package:http/http.dart' as http;
|
步骤三：发送请求
1
| var response = await http.post(Uri.parse("http://localhost:8080/getUserInfo"));
|
完整实例代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| import 'dart:convert';
import 'dart:io';
import 'package:flutter/material.dart';
class HttpClientExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
void _getUserInfo() async {
try {
// 1. 创建httpClient
HttpClient httpClient = HttpClient();
// 2. 打开http连接,设置请求头
HttpClientRequest request = await httpClient.getUrl(Uri.parse("http://localhost:8080/getUserInfo"));
// 3. 通过HttpClientRequest可以设置请求header
request.headers.add("token", "123456");
// 4. 等待连接服务器
HttpClientResponse response = await request.close();
// 5. 读取响应内容
String responseBody = await response.transform(utf8.decoder).join();
// 6. 请求结束,关闭httpClient
httpClient.close();
print(responseBody);
} catch (e) {
print(e);
}
}
return Scaffold(
appBar: AppBar(
title: Text("DioExample"),
),
body: Center(
child: Column(
children: [
TextButton(
onPressed: _getUserInfo,
child: Text("发送get请求"),
)
],
),
),
);
}
}
|
第三方网络请求库Dio
步骤一：添加依赖
1
2
| dependencies:
dio: ^4.0.0 #latest version
|
步骤二：导入库
1
| import 'package:dio/dio.dart';
|
步骤三：发送请求
1
| var response = await Dio().get('http://localhost:8080/getUserInfo');
|
完整示例代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
class DioExample extends StatelessWidget {
void _getUserInfo() async {
try {
var response = await Dio().get('http://localhost:8080/getUserInfo');
print(response);
} catch (e) {
print(e);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("DioExample"),
),
body: Center(
child: Column(
children: [
TextButton(
onPressed: _getUserInfo,
child: Text("发送get请求"),
)
],
),
),
);
}
}
|
总结
原生HttpClient发起网络请求非常的复杂，很多东西还需自己手动处理。如果涉及到上传、下载、断点续传 等那肯定非常繁琐，不建议使用。再来说一下Dio 和 http 两个第三方组件，他们封装的功能都差不多，反而 Dio 更强大易用，而且从gitbub的Star来说，Dio10000 star，而http才691 star，该数据由2021年08月24日统计。
