简介

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/

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

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