简介

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/

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

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