JSON字符串和Map类型的转换
import 'dart:convert';
Map userInfo = {
"username":"LaVie",
"age":28
};
print(userInfo);
//Map类型转为JSON字符串
String userInfoJson = jsonEncode(userInfo);
print(userInfoJson);
//JSON字符串转为Map类型
Map userInfoMap = jsonDecode(userInfoJson);
print(userInfoMap);
使用http库进行网络请求
Get请求示例:
//GET请求
_getData() async {
var apiUrl = "http://127.0.0.1:3000/news";
var response = await http.get(apiUrl);
if (response.statusCode == 200) {
var jsonResponse = convert.jsonDecode(response.body);
var itemCount = jsonResponse['totalItems'];
print("Number of books about http: $itemCount.");
} else {
print("Request failed with status: ${response.statusCode}.");
}
}
POST请求示例:
// POST请求
_postData() async {
//服务器地址
var apiUrl = "https://www.e-189.com/preciserequest/clientoper";
//请求参数
Map parameters = {"m": "registercount", "companyid": "28740"};
//网络请求的返回数据
var response = await http.post(apiUrl, body: parameters);
//处理返回数据
if (response.statusCode == 200) {
print(response.body);
var jsonResponse = convert.jsonDecode(response.body);
var registercount = jsonResponse['registercount'];
print("注册人数是$registercount人");
} else {
print("Request failed with status: ${response.statusCode}.");
}
}
接下来演示一个真实的应用场景。
网络请求列表数据,然后在页面中展示
import 'dart:convert' as convert;
import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';
class SettingPage extends StatefulWidget {
SettingPage({Key key}) : super(key: key);
_SettingPageState createState() => _SettingPageState();
}
class _SettingPageState extends State<SettingPage> {
List _dataSources = [];
//网络请求数据
_requestData() async{
//服务器地址
var serverUrl = "http://a.itying.com/api/productlist";
//处理网络请求下来的数据
var response = await http.get(serverUrl);
if (response.statusCode==200) {
//Json解析为Map
Map responseMap = convert.jsonDecode(response.body);
print(responseMap);
setState(() {
this._dataSources = responseMap["result"];
});
} else {
print("Request failed with status: ${response.statusCode}.");
}
}
@override
void initState() {
super.initState();
//页面一加载就执行网络请求
this._requestData();
}
@override
Widget build(BuildContext context) {
return Container(
/**
* 这里通过一个三目来判断数据是否请求成功
* 在数据请求成功之前,页面展示“加载中”
* 数据请求成功之后,就加在ListView列表
*/
child: this._dataSources.length==0?Text("加载中......"):ListView.builder(
itemCount: this._dataSources.length,
itemBuilder: (context, index){
return ListTile(
title: Text(this._dataSources[index]["title"]),
);
},
),
);
}
}
效果如下:
Flutter的Dio库实现网络请求
dio 比 http 更强大,它支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时、自定义适配器等。
import 'dart:convert' as convert;
import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
class SettingPage extends StatefulWidget {
SettingPage({Key key}) : super(key: key);
_SettingPageState createState() => _SettingPageState();
}
class _SettingPageState extends State<SettingPage> {
List _dataSources = [];
//网络请求数据
_requestData() async {
//服务器地址
var serverUrl = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
//处理网络请求下来的数据
var response = await Dio().get(serverUrl);
if (response.statusCode == 200) {
/**
* 这里需要注意,response.data的数据类型是不一定的
* 在实际做项目的时候需要判断一下类型,然后再做进一步处理
*/
print(response.data);
print(response.data is String);
setState(() {
this._dataSources = convert.jsonDecode(response.data)["result"];
print("888,${this._dataSources}");
});
} else {
print("Request failed with status: ${response.statusCode}.");
}
}
@override
void initState() {
super.initState();
//页面一加载就执行网络请求
this._requestData();
}
@override
Widget build(BuildContext context) {
print("666,${this._dataSources}");
return Container(
/**
* 这里通过一个三目来判断数据是否请求成功
* 在数据请求成功之前,页面展示“加载中”
* 数据请求成功之后,就加在ListView列表
*/
child: this._dataSources.length == 0
? Text("加载中......")
: ListView(
children: this._dataSources.map((value){
return ListTile(
title: Text(value["title"]),
);
}).toList(),
),
);
}
}
运行结果如下:
需要注意的是,Dio这个库非常强大,我们后期在做项目的时候,可以好好研究一下,这里就简单介绍一下这个库,让大家知道有这么一个库。
以上。