网络知识 娱乐 Flutter网络请求

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

打印如下:

I/flutter ( 7242): 
I/flutter ( 7242): 
I/flutter ( 7242):   中国
I/flutter ( 7242):   zhōng guó
I/flutter ( 7242):   
I/flutter ( 7242):   China;Chinese
I/flutter ( 7242):   
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";
  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): 
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
  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包。

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';
  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 = [];

  @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,
            )
          ],
        ),
      ),
    );
  }
}

在这里插入图片描述