简介

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/

最通俗的解读，最深刻的干货，最简洁的教程，众多你不知道的小技巧等你来发现！

欢迎关注我的公众号:「程序那些事」,懂技术，更懂你！

dart系列之:浏览器中的舞者,用dart发送HTTP请求相关推荐

VS Code使用系列 -- 在浏览器中调试javascript（browser app）
环境安装插件1:Live Server 插件2:JavaScript Debugger 使用步骤 1,从状态栏启动Live Server(点击"Go Live") 如果状态栏被隐 ...
exchange无法收发邮件_SpringBoot2.x系列教程69--SpringBoot中整合Mail实现邮件发送
SpringBoot2.x系列教程69--SpringBoot中整合邮件发送作者:一一哥注: 本文案例以QQ邮箱发送的实现为例! 一. 邮件发送概述 1. 概述在Spring框架中提供了一个Ja ...
Scrapy框架的学习(12. scrapy中的模拟登陆，发送post请求模拟登陆)
1.在有的网站的的登录的界面上,有用户名以及输入密码的输入框然后输入账号和密码进去,点击登录,后台就会把得到的数据发送过去,验证之后然后就登录成功了,就会跳转到响应的登录之后的网站 2. 我们可以 ...
在Java中，使用HttpUtils实现发送HTTP请求
HTTP请求,在日常开发中,还是比较常见的,今天给大家分享HttpUtils如何使用. 阅读本文,你将收获: 简单总结HTTP请求常用配置: JavaLib中HttpUtils如何使用: 如何封装HT ...
服务器应用程序不可用您试图在此 Web 服务器上访问的 Web 应用程序当前不可用。请点击 Web 浏览器中的“刷...
错误提示: 服务器应用程序不可用您试图在此 Web 服务器上访问的 Web 应用程序当前不可用.请点击 Web 浏览器中的"刷新"按钮重试您的请求. 管理员注意事项:详述此特定请求 ...
php判断微信浏览器跳转页面跳转,判断当前网页是否在微信浏览器中打开
这几天一直在与微信内置的浏览器打交道,也总结出一些如何判断当前浏览器环境是否为微信浏览器的小经验(其实代码网上一搜一大把),今天记录一下. 判断网页是否在微信浏览器中打,一般都是通过请求头信息中的HT ...
浏览器输入网址发生什么_在浏览器中输入网址时发生了什么
浏览器输入网址发生什么 It's commonplace. We type a web address into the browser and hit Enter. With modern in ...
jmeter安全证书_HTTPS证书生成及Jmeter中发送HTTPS请求
HTTPS证书生成在Jmeter中发送HTTPS协议请求,需要有SSL证书支持,而对于一个已知网站我们是可以自己生成该网站的SSL证书,并运用到Jmeter中,使Jmeter能发送HTTPS请求成功 ...
dart系列之:dart语言中的特殊操作符
dart系列之:dart语言中的特殊操作符文章目录简介普通操作符类型测试操作符条件运算符级联符号类中的自定义操作符总结简介有运算就有操作符,dart中除了普通的算术运算的操作符之外 ...

dart系列之:浏览器中的舞者,用dart发送HTTP请求

文章目录

简介

发送GET请求

发送post请求

更加通用的操作

总结

dart系列之:浏览器中的舞者,用dart发送HTTP请求相关推荐

最新文章

热门文章