摘要：集成了使用起來極其簡潔的請求對象，參考官方資料，今天就找個調(diào)試工具來試試請求，如果想了解更豐富的信息，請參考官方，列表在頁面的右邊。

Flutter集成了使用起來極其簡潔的HTTP請求對象，參考官方資料，今天就找個調(diào)試工具來試試HTTP請求，如果想了解更豐富的信息，請參考官方API dart:io，API列表在頁面的右邊。

到免費開放http請求API的網(wǎng)站，如聚合數(shù)據(jù)查詢天氣，注冊一個賬號，然后申請這個免費的接口，當然你也可以申請別的免費API，比如我就申請了倆免費接口：

打開VScode，到終端找一個存放項目代碼的目錄，輸入命令：

flutter create myhttptest

項目文件夾初始化完畢后，用VScode打開項目文件夾->打開main.dart，然后用以下代碼覆蓋初始化的代碼：

import "dart:convert";    //集成了支持json、utf-8等數(shù)據(jù)格式的編碼和解碼器
import "dart:io";        //集成了File, socket, HTTP等服務(wù)應(yīng)用的IO庫

import "package:flutter/material.dart";

void main() {
  runApp(new MyApp()); 
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State {
  var _ipAddress = "Unknown";  //為啥要定義這個變量呢？為了后面只需要寫一次setState()

  //異步執(zhí)行用到async關(guān)鍵字
  _getIPAddress() async { 
    /*接口url地址，包含了請求地址http://op.juhe.cn/onebox/weather/query和兩個參數(shù)cityname、AppKey*/
    var url = "http://op.juhe.cn/onebox/weather/query?cityname=上海&key=[替換成你的AppKey]";  
    var httpClient = new HttpClient();

    String result;
    //如同JAVA一樣的語法：
    try {
      var request = await httpClient.postUrl(Uri.parse(url));  /*也可以使用httpClient.getUrl，注意根據(jù)接口要求改變兩種請求方式的參數(shù)格式*/
      var response = await request.close();
      if (response.statusCode == HttpStatus.OK) {
        var json = await response.transform(UTF8.decoder).join();
        var data = JSON.decode(json);
        result = data["result"]["data"]["realtime"].toString();    //多維數(shù)組，請根據(jù)自己請求接口的結(jié)果對json數(shù)據(jù)結(jié)構(gòu)進行拆解
      } else {
        result =
            "Error get:
Http status ${response.statusCode}";    //連接錯誤提示
      }
    } catch (exception) {
      result = "Failed getting data";  //代碼執(zhí)行異常，拋出錯誤信息
    }
    //如果當前控件已經(jīng)被注銷掉，則當前控件內(nèi)置狀態(tài)為mounted。
    /*由于是前面的HTTP異步請求，如果網(wǎng)絡(luò)卡住，而當前控件因為其他原因注銷掉了，
      此時不必調(diào)讓代碼走到后面的setState()方法，否則會報錯，所以這里直接return，避免報錯。*/
    if (!mounted) return;

    setState(() {
      _ipAddress = result;    //顯示請求結(jié)果
    });
  }

  @override
  Widget build(BuildContext context) {
    var spacer = new SizedBox(height: 32.0);

    return new Scaffold(
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            new RaisedButton(
              onPressed: _getIPAddress,
              child: new Text("獲取天氣預報"),
            ),
            new Text("$_ipAddress."),
            spacer,
          ],
        ),
      ),
    );
  }
}

注意看上面代碼中的注釋，用到了mounted，參考API，意思是如果state對象實例創(chuàng)建后在執(zhí)行initState動作前，會關(guān)聯(lián)上BuildContext對象（對本篇內(nèi)容好像沒什么用），此時內(nèi)置狀態(tài)mounted標記為true，如果state對象實例執(zhí)行了dispose動作，此時mounted=false，意味著此state對象實例已消亡，代碼走到setState()方法時就會報錯。

手機連接好電腦后，記得打開WIFI或移動網(wǎng)絡(luò)。

啟用VScode的Debug工具，調(diào)試代碼，如圖所示：

相信有過開發(fā)經(jīng)驗的小伙伴理解上圖應(yīng)該沒有什么難度，請盡情把玩吧，APP測試效果：

關(guān)閉WIFI后，請求失敗的響應(yīng)非常快，不會像瀏覽器卡一下才彈出出錯頁面，猜測應(yīng)該是flutter能夠從硬件層探測WIFI或移動網(wǎng)絡(luò)是否啟用吧。

可以看到Dart2語法下的HTTP請求代碼非常簡潔，比起ES5的回調(diào)函數(shù)用起來方便多了，其外還支持promise，對熟悉ES6語法的同學有福啦，參考官方API：

HttpClient client = new HttpClient();
client.getUrl(Uri.parse("http://www.example.com/"))
    .then((HttpClientRequest request) {
      // Optionally set up headers...
      // Optionally write to the request object...
      // Then call close.
      ...
      return request.close();
    })
    .then((HttpClientResponse response) {
      // Process the response.
      ...
    });

好啦，今天就介紹到這里，本篇比較簡單，嫌太少的同學可以去文中引用的官方網(wǎng)站練練英語，偷個懶，哈哈哈，感謝大家捧場~
flutter 中文社區(qū)（官方QQ群：338252156）