文章系列
Flutter Dio源码分析(二)--HttpClient、Http、Dio对比
视频系列
Flutter Dio源码分析(二)--HttpClient、Http、Dio对比视频教程
源码仓库地址
前言
在前文中我们对Dio进行了基本介绍，也写了一个简单的示例，今天我们继续来讲一下Flutter 网络请求的三种请求方式的对比，以达到更好理解Dio网络请求库的目的。
系统自带网络请求HttpClient
步骤一：创建一个HttpClient
HttpClient httpClient = HttpClient();步骤二：打开http连接,设置请求头
HttpClientRequest request = await httpClient.getUrl(Uri.parse("http://localhost:8080/getUserInfo"));步骤三：通过HttpClientRequest可以设置请求header
request.headers.add("token", "123456");步骤四：等待连接服务器
HttpClientResponse response = await request.close();步骤五：读取响应内容
// 响应流数据以utf8编码格式返回
String responseBody = await response.transform(utf8.decoder).join();步骤六：请求结束,关闭httpClient
httpClient.close();完整示例代码
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
步骤一：添加依赖
dependencies:
http: ^0.13.3 #latest version步骤二：导入库
import 'package:http/http.dart' as http;步骤三：发送请求
var response = await http.post(Uri.parse("http://localhost:8080/getUserInfo"));完整实例代码
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
步骤一：添加依赖
dependencies:
dio: ^4.0.0 #latest version步骤二：导入库
import 'package:dio/dio.dart';步骤三：发送请求
var response = await Dio().get('http://localhost:8080/getUserInfo');完整示例代码
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日统计。