【Flutter】HTTP 网络操作 ( 引入 http 插件 | 测试网站 | Get 请求 | Post 请求 | 将响应结果转为 Dart 对象 | Future 异步调用 )
文章目录
- 一、引入 http 插件
- 二、HTTP 请求测试数据
- 三、使用 http 插件进行 Get 请求
- 四、使用 http 插件进行 Post 请求
- 五、将 Get / Post 请求结果 Future
一、引入 http 插件
到 https://pub.dev/packages 搜索 http 组件 https://pub.dev/packages/http ;
安装 http 插件 : 参考 https://pub.dev/packages/http/install 安装 ;
① 配置 Flutter 插件 : 在 pubspec.yaml 配置文件中配置 Flutter 插件 :
dependencies:http: ^0.13.3
② 获取 Flutter 插件 : 点击右上角的 " Pub get " 按钮 , 获取插件 , 此时会自动从 https://pub.dev/packages 平台下载该插件并配置到 Flutter 项目中 ;
③ 在项目中引入 : 在需要使用 Banner 轮播插件 flutter_swiper 的组件代码中导入该 dart 包 ;
import 'package:http/http.dart' as http;
二、HTTP 请求测试数据
在网上找了几个 json 数据链接 :
- https://www.devio.org/io/flutter_app/json/test_common_model.json
{"icon": "https://www.devio.org/io/flutter_app/img/ln_food.png","title": "美食林","url": "https://m.ctrip.com/webapp/you/foods/address.html?new=1&ishideheader=true","statusBarColor": "19A0F0","hideAppBar": true
}
- https://jsonplaceholder.typicode.com/posts/1
{"userId": 1,"id": 1,"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit","body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}
- https://jsonplaceholder.typicode.com/users/1/posts
- https://jsonplaceholder.typicode.com/users/1/todos
- https://jsonplaceholder.typicode.com/users/1/albums
- https://jsonplaceholder.typicode.com/albums/1/photos
- https://jsonplaceholder.typicode.com/posts/1/comments
三、使用 http 插件进行 Get 请求
引入 http 插件后 ,
import 'package:http/http.dart' as http;
调用 http.get 方法 , 发送 Get 请求 , 会返回一个包括 http.Response 泛型的 Future , 返回值类型为 Future<http.Response> ;
/// 调用 Http Get 方法 , 获取服务器的 json 数据Future<CommonModel> httpGet() async {//var url = Uri.parse('https://jsonplaceholder.typicode.com/posts/1');var url = Uri.parse('https://www.devio.org/io/flutter_app/json/test_common_model.json');final response = await http.get(url);Map<String, dynamic> jsonMap = json.decode(response.body);return CommonModel.fromJson(jsonMap);}
Future 是 异步操作 相关的核心 Dart 类 , 用于表示 将来 某个时间 可能出现的结果 ;
http.Get 返回值是 Future<http.Response> , 其中的 http.Response 泛型中 , 封装了 HTTP Request 请求对应的 Response 响应数据 , 也就是服务器返回给请求端的数据 ;
四、使用 http 插件进行 Post 请求
引入 http 插件后 ,
import 'package:http/http.dart' as http;
调用 http.get 方法 , 发送 Get 请求 , 会返回一个包括 http.Response 泛型的 Future , 返回值类型为 Future<http.Response> ;
/// 调用 Http Post 方法 , 获取服务器的 json 数据Future<CommonModel> httpPost() async {//var url = Uri.parse('https://jsonplaceholder.typicode.com/posts/1');var url = Uri.parse('https://www.devio.org/io/flutter_app/json/test_common_model.json');final response = await http.post(url);Map<String, dynamic> jsonMap = json.decode(response.body);return CommonModel.fromJson(jsonMap);}
Future 是 异步操作 相关的核心 Dart 类 , 用于表示 将来 某个时间 可能出现的结果 ;
http.Get 返回值是 Future<http.Response> , 其中的 http.Response 泛型中 , 封装了 HTTP Request 请求对应的 Response 响应数据 , 也就是服务器返回给请求端的数据 ;
五、将 Get / Post 请求结果 Future<http.Response> 转为 Dart 对象
将 Get / Post 请求结果 Future<http.Response> 转为 Dart 对象 :
创建 Model 类 , 用于存储获取的结果 , 参考 https://jsonplaceholder.typicode.com/posts/1 中的 json 数据创建 Dart 类 ;
CommonModel 类包括一个工厂方法 , 通过 Map<String, dynamic> json 类型 , 构造该类 ;
class CommonModel {final String icon;final String title;final String url;final String statusBarColor;final bool hideAppBar;CommonModel({this.icon, this.title, this.url, this.statusBarColor, this.hideAppBar});factory CommonModel.fromJson(Map<String, dynamic> json) {return CommonModel(icon: json['icon'],title: json['title'],url: json['url'],statusBarColor: json['statusBarColor'],hideAppBar: json['hideAppBar'],);}
}
将 http.Response 转换为 CommonModel 对象 : 需要使用 dart:convert 包 , 将 json 字符串转为 Map<String, dynamic> 类型数据 ;
/// json 序列化 , 反序列化 包
import 'dart:convert';
然后将 Map<String, dynamic> 类型对象传入 CommonModel 类工厂方法 ;
六、Future 异步调用
点击按钮后 , 调用 HTTP GET 方法 , 由于不知道什么时候返回 , 该方法肯定是一个异步方法 ;
返回值是 Future 类型的 ;
/// 调用 Http Get 方法 , 获取服务器的 json 数据Future<CommonModel> httpGet() async {//var url = Uri.parse('https://jsonplaceholder.typicode.com/posts/1');var url = Uri.parse('https://www.devio.org/io/flutter_app/json/test_common_model.json');final response = await http.get(url);Map<String, dynamic> jsonMap = json.decode(response.body);return CommonModel.fromJson(jsonMap);}
下面是按钮设置的点击方法 :
InkWell(child: Text("点击按钮进行 HTTP GET 请求"),onTap: (){/// httpGet() 方法返回 Future 类型返回值/// 调用 Future 的 then 方法 , 就会在网络请求成功后 , 执行该方法/// 也就是网络请求成功后 , 会自动调用该 then 方法/// 传入 Future 的泛型 CommonModel 对象作为参数httpGet().then((CommonModel value) {// httpGet 异步返回时 , 回调该方法setState(() {httpGetResult ="HTTP GET 请求结果 :\nuserId : ${value.icon}\n" +"title : ${value.title}\nurl : ${value.url}";});});},),
在按钮点击的时候 , 调用 httpGet() 方法 , 返回值是一个 Future 对象 ;
调用 Future 的 then 方法 , 就会在网络请求成功后 , 执行该方法 , 也就是网络请求成功后 , 会自动调用该 then 方法 , 传入 Future 的泛型 CommonModel 对象作为参数 ;
最后获取到返回值后 , 将返回值设置到 httpGetResult 成员中 ;
调用 setState 方法 , 更新 UI ;
七、完整代码
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;/// json 序列化 , 反序列化 包
import 'dart:convert';void main() {runApp(MyApp());
}class MyApp extends StatefulWidget {const MyApp({Key? key}) : super(key: key);@override_MyAppState createState() => _MyAppState();
}class _MyAppState extends State<MyApp> {/// HTTP GET 返回值String httpGetResult = "";/// 调用 Http Get 方法 , 获取服务器的 json 数据Future<CommonModel> httpGet() async {//var url = Uri.parse('https://jsonplaceholder.typicode.com/posts/1');var url = Uri.parse('https://www.devio.org/io/flutter_app/json/test_common_model.json');final response = await http.get(url);Map<String, dynamic> jsonMap = json.decode(response.body);return CommonModel.fromJson(jsonMap);}@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text("HTTP Get 请求"),),// 线性布局 列body: Column(children: [// 按钮InkWell(child: Text("点击按钮进行 HTTP GET 请求"),onTap: (){/// httpGet() 方法返回 Future 类型返回值/// 调用 Future 的 then 方法 , 就会在网络请求成功后 , 执行该方法/// 也就是网络请求成功后 , 会自动调用该 then 方法/// 传入 Future 的泛型 CommonModel 对象作为参数httpGet().then((CommonModel value) {// httpGet 异步返回时 , 回调该方法setState(() {httpGetResult ="HTTP GET 请求结果 :\nuserId : ${value.icon}\n" +"title : ${value.title}\nurl : ${value.url}";});});},),// 在该 Text 组件显示 HTTP GET 请求结果Text(httpGetResult),],),),);}
}class CommonModel {final String? icon;final String? title;final String? url;final String? statusBarColor;final bool? hideAppBar;CommonModel({this.icon, this.title, this.url, this.statusBarColor, this.hideAppBar});factory CommonModel.fromJson(Map<String, dynamic> json) {return CommonModel(icon: json['icon'],title: json['title'],url: json['url'],statusBarColor: json['statusBarColor'],hideAppBar: json['hideAppBar'],);}
}
运行结果 :
八、相关资源
参考资料 :
- Flutter 官网 : https://flutter.dev/
- Flutter 插件下载地址 : https://pub.dev/packages
- Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
- 官方 GitHub 地址 : https://github.com/flutter
- Flutter 中文社区 : https://flutter.cn/
- Flutter 实用教程 : https://flutter.cn/docs/cookbook
- Flutter CodeLab : https://codelabs.flutter-io.cn/
- Dart 中文文档 : https://dart.cn/
- Dart 开发者官网 : https://api.dart.dev/
- Flutter 中文网 : https://flutterchina.club/ , http://flutter.axuer.com/docs/
- Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )
- GitHub 上的 Flutter 开源示例 : https://download.csdn.net/download/han1202012/15989510
- Flutter 实战电子书 : https://book.flutterchina.club/chapter1/
重要的专题 :
- Flutter 动画参考文档 : https://flutterchina.club/animations/
博客源码下载 :
GitHub 地址 : https://github.com/han1202012/flutter_http( 随博客进度一直更新 , 有可能没有本博客的源码 )
博客源码快照 : https://download.csdn.net/download/han1202012/21528472 ( 本篇博客的源码快照 , 可以找到本博客的源码 )
【Flutter】HTTP 网络操作 ( 引入 http 插件 | 测试网站 | Get 请求 | Post 请求 | 将响应结果转为 Dart 对象 | Future 异步调用 )相关推荐
- kubernetes网络:service,插件,策略,dns优化
文章目录 网络插件 Flannel UDP vxlan host-gw calico提前简介 网络策略 安装 Calico NetworkPolicy 测试 Service 三种IP和四种端口 定义 ...
- 零基础学Python-爬虫-1、网络请求Requests【网络操作理论基础与实践·请认真看看理论,理论基础决定后期高度】
本套课程正式进入Python爬虫阶段,具体章节根据实际发布决定,可点击[python爬虫]分类专栏进行倒序观看: [重点提示:请勿爬取有害他人或国家利益的内容,此课程虽可爬取互联网任意内容,但无任何收 ...
- Node 简介、模块、模板引擎、NPM、文件操作、缓冲区、文件流、网络操作、Express框架
一.Node简介 1.1 客户端的JavaScript是怎样的 问题 答 什么是 JavaScript 脚本语言 运行在浏览器中 一般用来做客户端页面的交互(Interactive) JavaScri ...
- Android官方开发文档Training系列课程中文版:网络操作之网络管理
原文地址:http://android.xsoftlab.net/training/basics/network-ops/managing.html 这节课将会学习如何对网络资源的使用情况拥有更细粒度 ...
- 使用Flutter实现仿微信录音的插件
文章目录 使用Flutter实现 仿微信录音的插件 1,引入 使用 1, 初始化录制 2, 开始录制 3, 停止录制 4, 播放 3, 释放资源 4,回调监听 2,录制组件的使用 1,在使用的页面进行 ...
- flutter检测网络状态
flutter检测网络状态 原来使用的插件connectivity已经停止使用,现在使用的是新版的connectivity_plus 插件地址:https://pub.dev/packages/con ...
- 网络技术——路由器原理与测试
网络技术--路由器原理与测试 下列练习项目实验搭建详细过程配置与说明 练习1:实现静态路由传输协议 练习2:实现默认路由传输协议 a.开启远程登录控制路由器 1.路由器 1.1.路由器工作原理 1.2 ...
- 网络授时 linux,关于“网络授时域名”全面试运行测试的公告
关于"网络授时域名"全面试运行测试的公告 2018-09-21国家授时中心 [字体:大 中 小] 语音播报 广大用户: 为更好地满足用户的需求,提高网络授时服务质量,中国科学院国家 ...
- Vue项目中如何引入Toast插件
Vue项目中如何引入Toast插件 安装vue2-toast: npm install vue2-toast -S 在main.js中全局导入vue2-toast import 'vue2-toast ...
最新文章
- 视频监控为校园安全插上“隐形的翅膀”
- swagger导出excel文档_将Swagger2文档导出为HTML或markdown等格式离线阅读
- 信息系统项目管理师-招投标法、政府采购法核心知识点思维脑图
- 读取CRM 产品主数据所有属性的API
- linux防火墙 33001端口,Linux操作系统下IPTables配置方法详解
- 学PyTorch还是TensorFlow?
- JSP学习笔记(六十二):struts2中的Lambda表达式
- 简单使用AutoMapper实现DTO转换
- python课程开课吧怎么样-开课吧最新廖雪峰Python商业爬虫课程,全套完整课程资源下载...
- Litestar 4D:道路照明
- cad卸载工具_装不上也卸不掉,我的CAD仿佛已没救!...(CAD/MAX完美安装工具)...
- 【python】算术运算报错can‘t multiply sequence by non-int of type ‘float‘
- Unity 回合制战斗
- linux指令buster是什么,FGO三类战斗指令卡有什么用 合理利用手中指令卡
- 谷歌浏览器的本地收藏夹在什么位置?
- 一步步教你接入个推 推送
- jira的插件开发流程实践
- Mask R-CNN训练日记
- git命令统计代码量
- 在人工智能的角逐中,仿真数据是重要的平衡力量吗?