简介

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/

最艰深的解读，最粗浅的干货，最简洁的教程，泛滥你不晓得的小技巧等你来发现！

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