dart系列之:浏覽器中的舞者,用dart發送HTTP請求

目錄

簡介

發送GET請求

發送post請求

更加通用的操作

總結

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

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

雖然現代的web APP被各種架構所封裝，但是歸根結底他還是一個AJAX的富用戶端應用。我們通過各種異步的HTTP請求向伺服器端請求資料，然後展示在頁面上。一般來說資料的互動格式是JSON，當然也可以有其他的資料互動格式。

AJAX中最常用的方式就是向伺服器端發送get請求，對應的HttpRequest有一個getString方法：

注意，getString方法是一個類方法，是以直接使用HttpRequest類來調用：

因為getString傳回的是一個Future，是以可以直接在getString後面接then語句，來擷取傳回的值。

當然，你也可以在async方法中使用await來擷取傳回值。

或者使用try catch來捕獲異常：

GET是從伺服器拉取資料，相應的POST就是通用的向伺服器中送出資料的方法。在HttpRequest中，對應的方法是postFormData：

從方法的實作上可以看到，預設情況下使用的Content-Type: application/x-www-form-urlencoded; charset=UTF-8, 也就是說預設是以form表單送出的形式進行的。

在這種情況下，對于承載資料的data來說，會首先進行Uri.encodeQueryComponent進行編碼，然後再使用&進行連接配接。

下面是使用的例子：

注意，postFormData中傳回的是一個HttpRequest，雖然它叫做Request，但是實際上可以包含response的内容。是以直接使用他擷取傳回内容即可。

上面我們講解了get和form的post，從代碼可以看到，他們底層實際上都調用的是request方法。request是一個更加通用的HTTP請求方法。可以支援<code>POST</code>, <code>PUT</code>, <code>DELETE</code>等HTTP操作。下面是request的方法定義：

其中sendData可以是[ByteBuffer],[Blob], [Document], [String], 或者 [FormData] 等格式。

responseType表示的是HttpRequest.responseType,是傳回對象的格式，預設情況下是String，也可以是'arraybuffer', 'blob', 'document', 'json', 或者 'text'。

下面是一個是直接使用request的例子：

使用HttpRequest可以直接模拟浏覽器中的Ajax操作，非常友善。

本文已收錄于 http://www.flydean.com/21-dart-http/ 最通俗的解讀，最深刻的幹貨，最簡潔的教程，衆多你不知道的小技巧等你來發現！ 歡迎關注我的公衆号:「程式那些事」,懂技術，更懂你！