文章系列
Flutter Dio源碼分析(二)--HttpClient箩做、Http、Dio對(duì)比
視頻系列
Flutter Dio源碼分析(二)--HttpClient妥畏、Http、Dio對(duì)比視頻教程
源碼倉(cāng)庫(kù)地址
前言
在前文中我們對(duì)Dio進(jìn)行了基本介紹安吁，也寫了一個(gè)簡(jiǎn)單的示例醉蚁，今天我們繼續(xù)來講一下Flutter 網(wǎng)絡(luò)請(qǐng)求的三種請(qǐng)求方式的對(duì)比，以達(dá)到更好理解Dio網(wǎng)絡(luò)請(qǐng)求庫(kù)的目的鬼店。
系統(tǒng)自帶網(wǎng)絡(luò)請(qǐng)求HttpClient
步驟一：創(chuàng)建一個(gè)HttpClient
HttpClient httpClient = HttpClient();
步驟二：打開http連接,設(shè)置請(qǐng)求頭
HttpClientRequest request = await httpClient.getUrl(Uri.parse("http://localhost:8080/getUserInfo"));
步驟三：通過HttpClientRequest可以設(shè)置請(qǐng)求header
request.headers.add("token", "123456");
步驟四：等待連接服務(wù)器
HttpClientResponse response = await request.close();
步驟五：讀取響應(yīng)內(nèi)容
// 響應(yīng)流數(shù)據(jù)以u(píng)tf8編碼格式返回
String responseBody = await response.transform(utf8.decoder).join();
步驟六：請(qǐng)求結(jié)束,關(guān)閉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. 創(chuàng)建httpClient
HttpClient httpClient = HttpClient();
// 2. 打開http連接,設(shè)置請(qǐng)求頭
HttpClientRequest request = await httpClient.getUrl(Uri.parse("http://localhost:8080/getUserInfo"));
// 3. 通過HttpClientRequest可以設(shè)置請(qǐng)求header
request.headers.add("token", "123456");
// 4. 等待連接服務(wù)器
HttpClientResponse response = await request.close();
// 5. 讀取響應(yīng)內(nèi)容
String responseBody = await response.transform(utf8.decoder).join();
// 6. 請(qǐng)求結(jié)束,關(guān)閉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("發(fā)送get請(qǐng)求"),
)
],
),
),
);
}
}
第三方網(wǎng)絡(luò)請(qǐng)求庫(kù)Http
步驟一：添加依賴
dependencies:
http: ^0.13.3 #latest version
步驟二：導(dǎo)入庫(kù)
import 'package:http/http.dart' as http;
步驟三：發(fā)送請(qǐng)求
var response = await http.post(Uri.parse("http://localhost:8080/getUserInfo"));
完整實(shí)例代碼
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. 創(chuàng)建httpClient
HttpClient httpClient = HttpClient();
// 2. 打開http連接,設(shè)置請(qǐng)求頭
HttpClientRequest request = await httpClient.getUrl(Uri.parse("http://localhost:8080/getUserInfo"));
// 3. 通過HttpClientRequest可以設(shè)置請(qǐng)求header
request.headers.add("token", "123456");
// 4. 等待連接服務(wù)器
HttpClientResponse response = await request.close();
// 5. 讀取響應(yīng)內(nèi)容
String responseBody = await response.transform(utf8.decoder).join();
// 6. 請(qǐng)求結(jié)束,關(guān)閉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("發(fā)送get請(qǐng)求"),
)
],
),
),
);
}
}
第三方網(wǎng)絡(luò)請(qǐng)求庫(kù)Dio
步驟一：添加依賴
dependencies:
dio: ^4.0.0 #latest version
步驟二：導(dǎo)入庫(kù)
import 'package:dio/dio.dart';
步驟三：發(fā)送請(qǐng)求
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("發(fā)送get請(qǐng)求"),
)
],
),
),
);
}
}
總結(jié)
原生HttpClient發(fā)起網(wǎng)絡(luò)請(qǐng)求非常的復(fù)雜网棍，很多東西還需自己手動(dòng)處理。如果涉及到上傳妇智、下載滥玷、斷點(diǎn)續(xù)傳 等那肯定非常繁瑣氏身，不建議使用。再來說一下Dio 和 http 兩個(gè)第三方組件惑畴，他們封裝的功能都差不多蛋欣，反而 Dio 更強(qiáng)大易用，而且從gitbub的Star來說如贷，Dio10000 star陷虎，而http才691 star，該數(shù)據(jù)由2021年08月24日統(tǒng)計(jì)杠袱。
