flutter中常见的网络请求有三种分别是
1,Dart 原生的网络请求 HttpClient、
2,第三方网络请求 http
3,以及 Flutter 中的 Dio。
本文主要比较细致的讲解上述网络请求框架,以及对于charles抓包问题的处理。
本文demo
文章目录
演示效果
![Kapture 2021-09-08 at 16.17.05](https://i-blog.csdnimg.cn/blog_migrate/bb636efade29e974e2b7c7cf345b7fbe.gif)
一、HttpClient
HttpClient位于dart:io包中,属于dart语言自带网络请求
import 'dart:convert';
import 'dart:io';
1.1、创建一个HttpClient
Dart定义变量的方式,这里可以使用var、HttpClient、final都行
// 1.创建HttpClient对象
final httpClient = HttpClient();
// final HttpClient httpClient = new HttpClient();
1.2、构建请求的uri(请求参数)
在这步我们可以设置http或者https、host、请求参数queryParameters等,具体参考Uri源码,如下
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;
当然我们也可以直接写死请求链接
// 2.构建请求的uri
final uri = Uri.parse("http://www.tianqiapi.com/api/?version=v1&appid=97799796&appsecret=mN3u09pY");
上述方式等价于
final Uri uri=Uri(scheme: "http", host: "www.tianqiapi.com",path:'/api/' , queryParameters: {
"version":"v1",
"appid":"97799796",
"appsecret":"mN3u09pY",
});
1.3、设置网络请求代理
没有抓包需求的可以不看这步。
Flutter 应用的网络请求是不走手机的系统代理的,如有charles、fiddler抓包需求,需要设置代理如下:
// 3.设置debug代理
httpClient.findProxy = (uri) {
// 用1个开关设置是否开启代理
return AppConstant.isDebug ? "PROXY localhost:8888" : 'DIRECT';
};
1.4、构建请求
1.4.1、设置请求方式
在这步我们可以设置请求方式
// 4.构建请求(同时您也可以配置请求headers、 body。)
final request = await httpClient.getUrl(uri);
post、delete如下,更多可以点进去参照源码
final request = await httpClient.postUrl(uri);
final request = await httpClient.deleteUrl(uri);
1.4.2、设置headers
request.headers.add("user-agent", "test");
request.headers.add("Authorization", "LKSJDLFJSDLKJSLKklsdj");
charles抓包验证如下
![image-20210908152506060](https://i-blog.csdnimg.cn/blog_migrate/6944c95619980ae780901ca640b58933.jpeg)
1.4.3、设置cookies
request.cookies.add(Cookie("name", "value"));
charles抓包验证如下
![image-20210908152413909](https://i-blog.csdnimg.cn/blog_migrate/e35e34899fce3915a4adf1e2f7a19683.jpeg)
1.5、发送请求
// 5.发送请求,必须
final response = await request.close();
1.6、解码响应的内容
注意这里需要utf8转码,否则显示乱码
if (response.statusCode == HttpStatus.ok) {
// 6.解码响应的内容.
var temp = await response.transform(utf8.decoder).join();
var result = json.decode(temp);
setState(() {
this.result = result.toString();
});
}
1.7、全部代码
void requestNetwork() async {
// 1.创建HttpClient对象
final httpClient = HttpClient();
// final HttpClient httpClient = new HttpClient();
// 2.构建请求的uri
final uri = Uri.parse("http://www.tianqiapi.com/api/?version=v1&appid=97799796&appsecret=mN3u09pY");
// final Uri uri=Uri(scheme: "http", host: "www.tianqiapi.com",path:'/api/' , queryParameters: {
// "version":"v1",
// "appid":"97799796",
// "appsecret":"mN3u09pY",
// });
// 3.设置debug代理
httpClient.findProxy = (uri) {
// 用1个开关设置是否开启代理
return AppConstant.isDebug ? "PROXY localhost:8888" : 'DIRECT';
};
// 4.构建请求(同时您也可以配置请求headers、 body。)
final request = await httpClient.getUrl(uri);
// final request = await httpClient.postUrl(uri);
// final request = await httpClient.deleteUrl(uri);
// request.cookies.add(Cookie("name", "value"));
// request.headers.add("user-agent", "test");
// request.headers.add("Authorization", "LKSJDLFJSDLKJSLKklsdj");
// 5.发送请求,必须
final response = await request.close();
setState(() {
this.statusCode = response.statusCode.toString();
});
if (response.statusCode == HttpStatus.ok) {
// 6.解码响应的内容.
var temp = await response.transform(utf8.decoder).join();
var result = json.decode(temp);
setState(() {
this.result = result.toString();
});
}
}
二、http
添加依赖与导包
pubspec.yaml的dependencies添加
http : 0.13.3
导包
import 'package:http/http.dart' as http;
2.1、创建Client
// 1.创建Client
final client = http.Client();d
2.2、构建请求的uri(请求参数)
请求参数参考上面的1.2步骤
// 2.构建uri
final url = Uri.parse("http://www.tianqiapi.com/api/?version=v1&appid=97799796&appsecret=mN3u09pY");
2.3、发送请求
更改这里的get,切换请求方式
// 3.发送请求
final response = await client.get(url);
2.4、获取结果
if (response.statusCode == HttpStatus.ok) {
var temp = response.body;
var result = json.decode(temp);
setState(() {
this.result = result.toString();
});
}
2.5、全部代码
void requestNetwork() async {
// 1.创建Client
final client = http.Client();
// 2.构建uri
final url = Uri.parse("http://www.tianqiapi.com/api/?version=v1&appid=97799796&appsecret=mN3u09pY");
// 3.发送请求
final response = await client.get(url);
// 4.获取结果
setState(() {
this.statusCode = response.statusCode.toString();
});
if (response.statusCode == HttpStatus.ok) {
var temp = response.body;
var result = json.decode(temp);
setState(() {
this.result = result.toString();
});
}
}
三、Dio
添加依赖与导包
pubspec.yaml的dependencies添加
dio : 4.0.0
导包
import 'package:dio/dio.dart';
3.1、创建Dio请求对象
final dio = Dio();
3.2、构建请求的uri(请求参数)
请求参数参考上面的1.2步骤
// 2.构建uri
final url = Uri.parse("http://www.tianqiapi.com/api/?version=v1&appid=97799796&appsecret=mN3u09pY");
3.3、设置网络请求代理
// 3.设置debug代理
(dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate = (client) {
client.findProxy = (Uri) {
// 用1个开关设置是否开启代理
return AppConstant.isDebug ? "PROXY localhost:8888" : 'DIRECT';
};
};
3.4、发送请求
更改这里的getUri,切换请求方式
// 4.发送网络请求
final response = await dio.getUri(uri);
3.5、获取结果
response.data.toString()
3.6、全部代码
void requestNetwork() async {
// 1.创建Dio请求对象
final dio = Dio();
// 2.构建uri
final uri = Uri.parse("http://www.tianqiapi.com/api/?version=v1&appid=97799796&appsecret=mN3u09pY");
// 3.发送网络请求
final response = await dio.getUri(uri);
// 4.打印请求结果
setState(() {
this.statusCode = response.statusCode.toString();
});
if (response.statusCode == HttpStatus.ok) {
setState(() {
this.result = response.data.toString();
});
}
}