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

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

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

打開VScode，到終端找一個(gè)存放項(xiàng)目代碼的目錄，輸入命令：

flutter create myhttptest

項(xiàng)目文件夾初始化完畢后，用VScode打開項(xiàng)目文件夾->打開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";  //為啥要定義這個(gè)變量呢？為了后面只需要寫一次setState()

  //異步執(zhí)行用到async關(guān)鍵字
  _getIPAddress() async { 
    /*接口url地址，包含了請(qǐng)求地址http://op.juhe.cn/onebox/weather/query和兩個(gè)參數(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ù)接口要求改變兩種請(qǐng)求方式的參數(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ù)組，請(qǐng)根據(jù)自己請(qǐng)求接口的結(jié)果對(duì)json數(shù)據(jù)結(jié)構(gòu)進(jìn)行拆解
      } else {
        result =
            "Error get:
Http status ${response.statusCode}";    //連接錯(cuò)誤提示
      }
    } catch (exception) {
      result = "Failed getting data";  //代碼執(zhí)行異常，拋出錯(cuò)誤信息
    }
    //如果當(dāng)前控件已經(jīng)被注銷掉，則當(dāng)前控件內(nèi)置狀態(tài)為mounted。
    /*由于是前面的HTTP異步請(qǐng)求，如果網(wǎng)絡(luò)卡住，而當(dāng)前控件因?yàn)槠渌蜃N掉了，
      此時(shí)不必調(diào)讓代碼走到后面的setState()方法，否則會(huì)報(bào)錯(cuò)，所以這里直接return，避免報(bào)錯(cuò)。*/
    if (!mounted) return;

    setState(() {
      _ipAddress = result;    //顯示請(qǐng)求結(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("獲取天氣預(yù)報(bào)"),
            ),
            new Text("$_ipAddress."),
            spacer,
          ],
        ),
      ),
    );
  }
}

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

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

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

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

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

可以看到Dart2語法下的HTTP請(qǐng)求代碼非常簡(jiǎn)潔，比起ES5的回調(diào)函數(shù)用起來方便多了，其外還支持promise，對(duì)熟悉ES6語法的同學(xué)有福啦，參考官方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.
      ...
    });

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