Flutter网络请求
前言
在使用这些请求之前，我们需要知道它所使用的都是Flutter的网络编程模块，对此，我们就需要用到异步编程的技术，尽管我没分享这方面的编程知识，但是网上有很多资源可以借鉴。
在写这篇文章的时候，我遇到了很多新东西，在学校并没有老师教这门课，而是通过自己的白嫖现在都学的差不多了，但是有些方面还是有很大的问题。
对此，我就想到了写博客的方式记录自己的学习过程，让自己多多的积累起来，日后打开该页，我也会自动的浮现当时的郁闷心情…但收获到的东西还是占多数部分。下面将是我对网络编程这块的总结，如有不正确的地方，望指出，看到了我也懒得改…嘿嘿。
友情提示
在这之前说明一下，对于网络地址请求错误出现下面这样的错误，应该在地址前面加上http://或https://进行请求。
E/flutter ( 8218):
[ERROR:flutter/lib/ui/ui_dart_state.cc(209)] Unhandled Exception: Invalid argument(s): No host specified in URI fy.webxml.com.cn/webservices/EnglishChinese.asmx/TranslatorString
E/flutter ( 8218): #0 _HttpClient._openUrl (dart:_http/http_impl.dart:2662:9)
E/flutter ( 8218): #1 _HttpClient.openUrl (dart:_http/http_impl.dart:2568:7)
HttpClient
请求步骤
String url =
“http://ws.webxml.com.cn/WebServices/WeatherWS.asmx/getRegionCountry?”;
1.创建对象
var httpClient = HttpClient(); // 创建对象
2.发送请求
var request = await httpClient.getUrl(Uri.parse(url)); // 发送请求
- 得到响应内容
var response = await request.close(); // 得到响应
4.转码
var responseBody = await response.transform(utf8.decoder).join(); // 转码
结果：
I/flutter ( 2845):
I/flutter ( 2845): 阿尔及利亚,3320
I/flutter ( 2845): 阿根廷,3522
I/flutter ( 2845): 阿曼,3170
I/flutter ( 2845): 阿塞拜疆,3176
I/flutter ( 2845): 埃及,3317
I/flutter ( 2845): 埃塞俄比亚,3314
I/flutter ( 2845): 爱尔兰,3246
I/flutter ( 2845): 奥地利,3237
I/flutter ( 2845): 澳大利亚,368
I/flutter ( 2845): 巴基斯坦,3169
I/flutter ( 2845): 巴西,3580
.........
Http请求
需要导入依赖
dependencies: http: ^0.13.4
url地址
// url地址 String url = "http://ws.webxml.com.cn/WebServices/WeatherWS.asmx/getRegionCountry?"; // 存放响应内容 String info = "响应内容";
Get请求
1.发送请求
var result = await http.get(Uri.parse(url)); // 发送请求
2.得到响应内容
info = result.body;
打印结果如下：
I/flutter ( 3444):
I/flutter ( 3444):
I/flutter ( 3444): 阿尔及利亚,3320
I/flutter ( 3444): 阿根廷,3522
I/flutter ( 3444): 阿曼,3170
I/flutter ( 3444): 阿塞拜疆,3176
I/flutter ( 3444): 埃及,3317
I/flutter ( 3444): 埃塞俄比亚,3314
I/flutter ( 3444): 爱尔兰,3246
..........
Post请求
准备数据
String fyUrl = "http://fy.webxml.com.cn/webservices/EnglishChinese.asmx/TranslatorString";
- 根据
API准备参数：
var body = {"wordKey":"中国"};
- 提交请求
var result = await http.post(Uri.parse(url),body: body);
- 得到结果，需要使用
.body才能得到内容。
info = result.body;
打印如下：
I/flutter ( 7242):
I/flutter ( 7242):
I/flutter ( 7242): 中国
I/flutter ( 7242): zhōng guó
I/flutter ( 7242): China；Chinese
I/flutter ( 7242):
Dio请求
官方文档链接：
https://github.com/flutterchina/dio/blob/develop/README-ZH.md#cookie%E7%AE%A1%E7%90%86
添加依赖
dart dependencies: dio: ^4.0.4
url地址
String name = "宜宾"; String weather= "http://ws.webxml.com.cn//WebServices/WeatherWS.asmx/getWeather?theCityCode=${name}&theUserID=";
Get请求
准备url地址
// 第一种方式
String name = "宜宾";
var url1 = "http://ws.webxml.com.cn/WebServices/WeatherWS.asmx/getWeather?theCityCode=${name}&theUserID=";
// 第二种方式
var url2 = "http://ws.webxml.com.cn/WebServices/WeatherWS.asmx/getWeather";
- 创建对象
Dio dio = Dio();
- 发送请求
var response = await dio.get(weather);
另一种写法，将需要的参数使用Map格式传进去。
var response = await dio.get(url,queryParameters:{"theCityCode":"宜宾","theUserID":""});
- 得到数据，使用
data才能得到结果
var info = response.data;
- 打印
I/flutter ( 8218):
I/flutter ( 8218):
I/flutter ( 8218): 四川 宜宾
I/flutter ( 8218): 宜宾
I/flutter ( 8218): 1167
I/flutter ( 8218): 2022/03/01 14:30:04
I/flutter ( 8218): 今日天气实况：气温：19℃；风向/风力：东南风 2级；湿度：35%
I/flutter ( 8218): 紫外线强度：很强。
I/flutter ( 8218): 感冒指数：少发，无明显降温，感冒机率较低。
I/flutter ( 8218): 运动指数：适宜，天气较好，尽情感受运动的快乐吧。
I/flutter ( 8218): 过敏指数：较易发，外出需远离过敏源，适当采取防护措施。
I/flutter ( 8218): 穿衣指数：较冷，建议着厚外套加毛衣等服装。
I/flutter ( 8218): 洗车指数：适宜，天气较好，适合擦洗汽车。
I/flutter ( 8218): 紫外线指数：很强，涂擦SPF20以上，PA++护肤品，避强光。
.........
Post请求
注：由于Dio的post请求有点复杂，我百度了很久才发现这样请求才不会报400~500的网络错误。
制作 post url地址：
String url = "http://fy.webxml.com.cn/webservices/EnglishChinese.asmx/Translator";
// 所需参数
wordKey=string
- 创建对象
var dio = await Dio();
- 设置
Post请求参数，data是Map类型的参数，可以放在外面，其他的就把他当做固定写法吧…
var response = await dio.post(url,
data: {"wordKey": "熊猫"},
options: Options(
contentType: Headers.formUrlEncodedContentType));
- 接收结果，
Dio使用的是.data接收数据
var result = await response.data;
- 打印结果如下
I/flutter ( 2270): <?xml version="1.0" encoding="utf-8"?>
I/flutter ( 2270): <DataSet xmlns="http://WebXml.com.cn/">
I/flutter ( 2270): <xs:schema id="Dictionary" xmlns="" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
I/flutter ( 2270): <xs:element name="Dictionary" msdata:IsDataSet="true" msdata:UseCurrentLocale="true">
I/flutter ( 2270): <xs:complexType>
I/flutter ( 2270): <xs:choice minOccurs="0" maxOccurs="unbounded">
I/flutter ( 2270): <xs:element name="Trans">
I/flutter ( 2270): <xs:complexType>
I/flutter ( 2270): <xs:sequence>
I/flutter ( 2270): <xs:element name="WordKey" type="xs:string" minOccurs="0" />
..............
使用 xml 解析数据
注：只能解析带有下面这种格式开头的数据，并且在得到查找到的数据时使用.text 获取它。
<?xml version="1.0" encoding="utf-8"?>
先添加依赖，因为没有内置xml包。
dart dependencies: xml: ^5.3.1
导入包
dart import 'package:xml/xml.dart' as xml;
请求网站 "http://ws.webxml.com.cn/WebServices/WeatherWS.asmx/getRegionCountry?"。
// 创建 xml 对象，responseBody是上面我们请求得到的数据！！
xml.XmlDocument docement = xml.parse(responseBody);
// 放置xml中找到的元素值
List list = [];
// 找到“string”标签，并获取到每一个标签
docement.findAllElements("string").map((e) {
list.add(e.text); // 获取标签中的值，使用 .text 获取找到的数据
}).toList(); // 转换为列表，列表中已经放置了xml标签中每一个“string”标签的值
// 注意一定要转换为列表
// 打印列表中的每一个值
for(int i=0;i结果：
阿尔及利亚,3320
I/flutter ( 2144): 阿尔及利亚,3320
I/flutter ( 2144): 阿根廷,3522
I/flutter ( 2144): 阿曼,3170
I/flutter ( 2144): 阿塞拜疆,3176
I/flutter ( 2144): 埃及,3317
I/flutter ( 2144): 埃塞俄比亚,3314
I/flutter ( 2144): 爱尔兰,3246
I/flutter ( 2144): 奥地利,3237
I/flutter ( 2144): 澳大利亚,368
I/flutter ( 2144): 巴基斯坦,3169
I/flutter ( 2144): 巴西,3580
I/flutter ( 2144): 保加利亚,3232
.........
解析Json数据
准备数据，可以使用上面介绍的三种方式进行请求保存下来的数据。
导入模块：
import 'dart:convert';
- 准备
url地址
在这里插入代码片
- 解析数据
// Json数据来源需要自己准备
String url = "http://blog.qingsmile.com:9000/data";
// 创建对象
var httpclient = await HttpClient();
var request = await httpclient.getUrl(Uri.parse(url));
var response = await request.close();
var result = await response.transform(utf8.decoder).join();
setState(() {
info = result;
});
// 调用 json.decode()方法进行解析，解析出的结果需用 Map 放置
Map body = json.decode(result);
// print(body);
for(int i=0;i<body['data'].length;i++){
print(body['data'][i]['name']);
}
- 打印
I/flutter ( 2270): 王二
I/flutter ( 2270): 张三
I/flutter ( 2270): 李四
I/flutter ( 2270): 黄五
I/flutter ( 2270): 赵六
I/flutter ( 2270): 马七
I/flutter ( 2270): 刘八
I/flutter ( 2270): 蔡九
源码部分
class HttpDemoPage extends StatefulWidget {
const HttpDemoPage({Key? key}) : super(key: key);
@override
_HttpDemoPageState createState() => _HttpDemoPageState();
}
class _HttpDemoPageState extends State<HttpDemoPage> {
// 显示内容
String info = "显示内容";
// 存放解析出的xml数据
List lists = [];
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Align(
alignment: Alignment.center,
child: Column(
children: [
ElevatedButton(
onPressed: () async {
// Json数据来源需要自己准备
String url = "http://blog.qingsmile.com:9000/data";
// 创建对象
var httpclient = await HttpClient();
var request = await httpclient.getUrl(Uri.parse(url));
var response = await request.close();
var result = await response.transform(utf8.decoder).join();
setState(() {
info = result;
});
// 调用 json.decode()方法进行解析，解析出的结果需用 Map 放置
Map body = json.decode(result);
// print(body);
for (int i = 0; i < body['data'].length; i++) {
info = body['data'][i]['name'];
print(info);
}
},
child: Text("HttpClient请求")),
ElevatedButton(
onPressed: () async {
String name = "中国";
var url_01 =
"http://fy.webxml.com.cn/webservices/EnglishChinese.asmx/Translator?wordKey=${name}";
var response = await http.get(Uri.parse(url_01));
if (response.statusCode == 200) {
setState(() {
info = response.body;
});
print(info);
}
},
child: Text("HttpGet请求")),
ElevatedButton(
onPressed: () async {
var url =
"http://fy.webxml.com.cn/webservices/EnglishChinese.asmx/Translator";
var response =
await http.post(Uri.parse(url), body: {"wordKey": "老虎"});
if (response.statusCode == 200) {
setState(() {
info = response.body;
});
print(info);
}
},
child: Text("HttpPost请求")),
ElevatedButton(
onPressed: () async {
var url2 =
"http://ws.webxml.com.cn/WebServices/WeatherWS.asmx/getWeather";
// 创建对象
var dio = await Dio();
var response = await dio.get(url2,
queryParameters: {"theCityCode": "宜宾", "theUserID": ""});
var body = await response.data;
setState(() {
info = body;
});
print(body);
},
child: Text("DioGet请求")),
ElevatedButton(
onPressed: () async {
String url =
"http://fy.webxml.com.cn/webservices/EnglishChinese.asmx/Translator";
// 创建对象
var dio = await Dio();
var response = await dio.post(url,
data: {"wordKey": "熊猫"},
options: Options(
contentType: Headers.formUrlEncodedContentType));
var result = await response.data;
setState(() {
info = result;
});
print(result.toString());
},
child: Text("DioPost请求")),
Container(
child: Card(child: Column(children: [Text(info)])),
margin: EdgeInsets.all(10),
width: MediaQuery.of(context).size.width,
)
],
),
),
);
}
}