文章目錄

• 簡介
• 發(fā)送GET請求
• 發(fā)送post請求
• 更加通用的操作
• 總結(jié)

簡介

dart:html包為dart提供了構(gòu)建瀏覽器客戶端的一些必須的組件，之前我們提到了HTML和DOM的操作，除了這些之外，我們在瀏覽器端另一個常用的操作就是使用XMLHttpRequest去做異步HTTP資源的請求，也就是AJAX請求。

dart同樣提供了類似JS中XMLHttpRequest的封裝，其對應(yīng)的類叫做HttpRequest，一起來看看在dart中怎么使用HttpRequest吧。

發(fā)送GET請求

雖然現(xiàn)代的web APP被各種框架所封裝，但是歸根結(jié)底他還是一個AJAX的富客戶端應(yīng)用。我們通過各種異步的HTTP請求向服務(wù)器端請求數(shù)據(jù)，然后展示在頁面上。一般來說數(shù)據(jù)的交互格式是JSON，當然也可以有其他的數(shù)據(jù)交互格式。

AJAX中最常用的方式就是向服務(wù)器端發(fā)送get請求，對應(yīng)的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類來調(diào)用：

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... }

發(fā)送post請求

GET是從服務(wù)器拉取數(shù)據(jù)，相應(yīng)的POST就是通用的向服務(wù)器中提交數(shù)據(jù)的方法。在HttpRequest中，對應(yīng)的方法是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);}

從方法的實現(xiàn)上可以看到，默認情況下使用的Content-Type: application/x-www-form-urlencoded; charset=UTF-8, 也就是說默認是以form表單提交的形式進行的。

在這種情況下，對于承載數(shù)據(jù)的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的內(nèi)容。所以直接使用他獲取返回內(nèi)容即可。

更加通用的操作

上面我們講解了get和form的post，從代碼可以看到，他們底層實際上都調(diào)用的是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.});

總結(jié)

使用HttpRequest可以直接模擬瀏覽器中的Ajax操作，非常方便。

本文已收錄于 http://www.flydean.com/21-dart-http/

最通俗的解讀，最深刻的干貨，最簡潔的教程，眾多你不知道的小技巧等你來發(fā)現(xiàn)！

歡迎關(guān)注我的公眾號:「程序那些事」,懂技術(shù)，更懂你！

總結(jié)

以上是生活随笔為你收集整理的dart系列之:浏览器中的舞者,用dart发送HTTP请求的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。