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/TranslatorStringE/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(); // 转码

结果：

<?xml version="1.0" encoding="utf-8"?>
I/flutter ( 2845): <ArrayOfString xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://WebXml.com.cn/">
I/flutter ( 2845):   <string>阿尔及利亚,3320</string>
I/flutter ( 2845):   <string>阿根廷,3522</string>
I/flutter ( 2845):   <string>阿曼,3170</string>
I/flutter ( 2845):   <string>阿塞拜疆,3176</string>
I/flutter ( 2845):   <string>埃及,3317</string>
I/flutter ( 2845):   <string>埃塞俄比亚,3314</string>
I/flutter ( 2845):   <string>爱尔兰,3246</string>
I/flutter ( 2845):   <string>奥地利,3237</string>
I/flutter ( 2845):   <string>澳大利亚,368</string>
I/flutter ( 2845):   <string>巴基斯坦,3169</string>
I/flutter ( 2845):   <string>巴西,3580</string>.........

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): <?xml version="1.0" encoding="utf-8"?>
I/flutter ( 3444): <ArrayOfString xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://WebXml.com.cn/">
I/flutter ( 3444):   <string>阿尔及利亚,3320</string>
I/flutter ( 3444):   <string>阿根廷,3522</string>
I/flutter ( 3444):   <string>阿曼,3170</string>
I/flutter ( 3444):   <string>阿塞拜疆,3176</string>
I/flutter ( 3444):   <string>埃及,3317</string>
I/flutter ( 3444):   <string>埃塞俄比亚,3314</string>
I/flutter ( 3444):   <string>爱尔兰,3246</string>..........

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): <?xml version="1.0" encoding="utf-8"?>
I/flutter ( 7242): <ArrayOfString xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://WebXml.com.cn/">
I/flutter ( 7242):   <string>中国</string>
I/flutter ( 7242):   <string>zhōng guó</string>
I/flutter ( 7242):   <string />
I/flutter ( 7242):   <string>China；Chinese</string>
I/flutter ( 7242):   <string />
I/flutter ( 7242): </ArrayOfString>

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): <?xml version="1.0" encoding="utf-8"?>
I/flutter ( 8218): <ArrayOfString xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://WebXml.com.cn/">
I/flutter ( 8218):   <string>四川 宜宾</string>
I/flutter ( 8218):   <string>宜宾</string>
I/flutter ( 8218):   <string>1167</string>
I/flutter ( 8218):   <string>2022/03/01 14:30:04</string>
I/flutter ( 8218):   <string>今日天气实况：气温：19℃；风向/风力：东南风 2级；湿度：35%</string>
I/flutter ( 8218):   <string>紫外线强度：很强。</string>
I/flutter ( 8218):   <string>感冒指数：少发，无明显降温，感冒机率较低。
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<list.length;i++){print(list[i]);}
} else {print("没有请求成功"); // 没有请求成功}
},

结果：

阿尔及利亚,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 = [];@overrideWidget 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,)],),),);}
}