dart系列之:浏览器中的舞者,用dart发送HTTP请求
简介
dart:html包为dart提供了构建浏览器客户端的一些必须的组件,之前我们提到了HTML和DOM的操作,除了这些之外,我们在浏览器端另一个常用的操作就是使用XMLHttpRequest去做异步HTTP资源的请求,也就是AJAX请求。
dart同样提供了类似JS中XMLHttpRequest的封装,其对应的类叫做HttpRequest,一起来看看在dart中怎么使用HttpRequest吧。
发送GET请求
虽然现代的web APP被各种框架所封装,但是归根结底他还是一个AJAX的富客户端应用。我们通过各种异步的HTTP请求向服务器端请求数据,然后展示在页面上。一般来说数据的交互格式是JSON,当然也可以有其他的数据交互格式。
AJAX中最常用的方式就是向服务器端发送get请求,对应的HttpRequest有一个getString方法:
static Future<String> getString(String url, {bool? withCredentials, void onProgress(ProgressEvent e)?}) { return request(url, withCredentials: withCredentials, onProgress: onProgress) .then((HttpRequest xhr) => xhr.responseText!); }
注意,getString方法是一个类方法,所以直接使用HttpRequest类来调用:
var name = Uri.encodeQueryComponent('John'); var id = Uri.encodeQueryComponent('42'); HttpRequest.getString('users.json?name=name&id=id') .then((String resp) { // Do something with the response. });
因为getString返回的是一个Future,所以可以直接在getString后面接then语句,来获取返回的值。
当然,你也可以在async方法中使用await来获取返回值。
Future<void> main() async { String pageHtml = await HttpRequest.getString(url); // Do something with pageHtml... }
或者使用try catch来捕获异常:
try { var data = await HttpRequest.getString(jsonUri); // Process data... } catch (e) { // Handle exception... }
发送post请求
GET是从服务器拉取数据,相应的POST就是通用的向服务器中提交数据的方法。在HttpRequest中,对应的方法是postFormData:
static Future<HttpRequest> postFormData(String url, Map<String, String> data, {bool? withCredentials, String? responseType, Map<String, String>? requestHeaders, void onProgress(ProgressEvent e)?}) { var parts = []; data.forEach((key, value) { parts.add('{Uri.encodeQueryComponent(key)}=' '{Uri.encodeQueryComponent(value)}'); }); var formData = parts.join('&'); if (requestHeaders == null) { requestHeaders = <String, String>{}; } requestHeaders.putIfAbsent('Content-Type', () => 'application/x-www-form-urlencoded; charset=UTF-8'); return request(url, method: 'POST', withCredentials: withCredentials, responseType: responseType, requestHeaders: requestHeaders, sendData: formData, onProgress: onProgress); }
从方法的实现上可以看到,默认情况下使用的Content-Type: application/x-www-form-urlencoded; charset=UTF-8, 也就是说默认是以form表单提交的形式进行的。
在这种情况下,对于承载数据的data来说,会首先进行Uri.encodeQueryComponent进行编码,然后再使用&进行连接。
下面是使用的例子:
var data = { 'firstName' : 'John', 'lastName' : 'Doe' }; HttpRequest.postFormData('/send', data).then((HttpRequest resp) { // Do something with the response. });
注意,postFormData中返回的是一个HttpRequest,虽然它叫做Request,但是实际上可以包含response的内容。所以直接使用他获取返回内容即可。
更加通用的操作
上面我们讲解了get和form的post,从代码可以看到,他们底层实际上都调用的是request方法。request是一个更加通用的HTTP请求方法。可以支持POST
,PUT
,DELETE
等HTTP操作。下面是request的方法定义:
static Future<HttpRequest> request(String url, {String? method, bool? withCredentials, String? responseType, String? mimeType, Map<String, String>? requestHeaders, sendData, void onProgress(ProgressEvent e)?})
其中sendData可以是[ByteBuffer],[Blob], [Document], [String], 或者 [FormData] 等格式。
responseType表示的是HttpRequest.responseType,是返回对象的格式,默认情况下是String,也可以是’arraybuffer’, ‘blob’, ‘document’, ‘json’, 或者 ‘text’。
下面是一个是直接使用request的例子:
var myForm = querySelector('form#myForm'); var data = new FormData(myForm); HttpRequest.request('/submit', method: 'POST', sendData: data) .then((HttpRequest resp) { // Do something with the response. });
总结
使用HttpRequest可以直接模拟浏览器中的Ajax操作,非常方便。
本文已收录于 http://www.flydean.com/21-dart-http/
最通俗的解读,最深刻的干货,最简洁的教程,众多你不知道的小技巧等你来发现!
欢迎关注我的公众号:「程序那些事」,懂技术,更懂你!
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
8 张图 | 剖析 Eureka 的首次同步注册表
初次见面,能否把你的「注册表」都给我? 大家好,我是悟空。 Eureka 注册中心系列文章汇总: 领导让我研究 Eureka 源码 | 启动过程 领导“叕”让我研究 Eureka 源码:注册过程 值得收藏的 Eureka 控制台详解 原来一个 Map 就能搞定注册表了 一、前言 注册表对于注册中心尤为重要,所有的功能都是围绕这个注册表展开。比如服务 A 要想访问服务 B,就得知道服务 B 的 IP 地址和端口号吧。如下图所示,传统的方式就是服务 A 知道了服务 B 的地址后,发送 HTTP 请求到对应的 API 地址上。 那服务 A 和 服务 B 的信息其实就是放在注册中心的注册表里面的,由注册中心统一管理所有服务的注册、下线。服务 A 和 服务 B 想要获取注册信息,统一访问注册中心,拿到注册表,就知道其他服务的 IP 地址 和端口号了。 上一讲,我们讲到一个 Eureka Client 成功注册到 Eureka Server 后,Eureka Server 就会把注册表信息存到一个 ConcurrentHashMap 中。 那 Client 怎么获取其他客户注册信息呢? 二、首次获...
- 下一篇
InnoDB学习(五)之MVCC多版本并发控制
MVCC多版本并发控制,是一种数据库管理系统并发控制的方法。MVCC多版本并发控制下,数据库中的数据会有多个版本,分别对应不同的事务,从而达到事务之间并发数据的隔离。MVCC最大的优势是读不加锁,读写不冲突,在读多写少场景中,读写不冲突可以大幅提升数据库的并发性能。 MVCC多版本并发控制 在MYSQL中,MyISAM存储引擎使用的是表锁,InnoDB存储引擎使用的是行锁。而InnoDB的事务分为四个隔离级别,其中默认的隔离级别是可重复读,可重复读要求两个并行的事务之间数据的修改互不影响,通过添加行锁的方式虽然可以实现两个事务之间数据据的修改互不影响,但是者两个事务之间存在锁等待的情况,影响数据库效率。所以InnoDB的可重复读没有采用行锁,而是使用了更为强大的MVCC。 MVCC只有在可重复读和读已提交的隔离级别下生效,其它两个隔离级别和MVCC不兼容,因为读未提交总是读最新的数据行,和事务版本无关,串行化则是会对所有读取的行加锁。由于可重复读的情况比较复杂,并且是MySQL的默认隔离级别,所以本文会用可重复读来讲解MVCC的原理。 可重复读 数据库有四种隔离级别:读未提交/读已提交...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,CentOS8安装Elasticsearch6.8.6
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- Linux系统CentOS6、CentOS7手动修改IP地址
- CentOS7安装Docker,走上虚拟化容器引擎之路
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- SpringBoot2全家桶,快速入门学习开发网站教程