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

请求步骤

1.创建对象

var httpClient = HttpClient(); // 创建对象

2.发送请求

var request = await httpClient.getUrl(Uri.parse(url)); // 发送请求
  1. 得到响应内容
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请求

需要导入依赖

url地址

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";
  1. 根据API准备参数:
var body = {"wordKey":"中国"};
  1. 提交请求
var result = await http.post(Uri.parse(url),body: body);
  1. 得到结果,需要使用.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请求

官方文档链接:

添加依赖

url地址

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";
  1. 创建对象
Dio dio = Dio();
  1. 发送请求
var response = await dio.get(weather);

另一种写法,将需要的参数使用Map格式传进去。

var response = await dio.get(url,queryParameters:{"theCityCode":"宜宾","theUserID":""});
  1. 得到数据,使用data才能得到结果
var info = response.data;
  1. 打印
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
  1. 创建对象
var dio = await Dio();
  1. 设置Post请求参数,dataMap类型的参数,可以放在外面,其他的就把他当做固定写法吧…
var response = await dio.post(url,data: {"wordKey": "熊猫"},options: Options(contentType: Headers.formUrlEncodedContentType));
  1. 接收结果,Dio使用的是.data接收数据
var result = await response.data;
  1. 打印结果如下
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包。

导入包

请求网站 "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';
  1. 准备url地址
在这里插入代码片
  1. 解析数据
 // 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']);}
  1. 打印
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,)],),),);}
}

本文链接:https://my.lmcjl.com/post/1299.html

展开阅读全文

4 评论

留下您的评论.