简介
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/
最通俗的解读，最深刻的干货，最简洁的教程，众多你不知道的小技巧等你来发现！
欢迎关注我的公众号:「程序那些事」,懂技术，更懂你！
评论