flutter筆記6：試玩flutter的HTTP請求和VScode調試工具

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

第一步

到免費開放http請求API的網站，如聚合數據查詢天氣，註冊一個帳號，而後申請這個免費的接口，固然你也能夠申請別的免費API，好比我就申請了倆免費接口：

第二步

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

flutter create myhttptest

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

import 'dart:convert';    //集成了支持json、utf-8等數據格式的編碼和解碼器
import 'dart:io';        //集成了File, socket, HTTP等服務應用的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<MyHomePage> {
  var _ipAddress = 'Unknown';  //爲啥要定義這個變量呢？爲了後面只須要寫一次setState()

  //異步執行用到async關鍵字
  _getIPAddress() async { 
    /*接口url地址，包含了請求地址http://op.juhe.cn/onebox/weather/query和兩個參數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，注意根據接口要求改變兩種請求方式的參數格式*/
      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();    //多維數組，請根據本身請求接口的結果對json數據結構進行拆解
      } else {
        result =
            'Error get:\nHttp status ${response.statusCode}';    //鏈接錯誤提示
      }
    } catch (exception) {
      result = 'Failed getting data';  //代碼執行異常，拋出錯誤信息
    }
    //若是當前控件已經被註銷掉，則當前控件內置狀態爲mounted。
    /*因爲是前面的HTTP異步請求，若是網絡卡住，而當前控件由於其餘緣由註銷掉了，
      此時沒必要調讓代碼走到後面的setState()方法，不然會報錯，因此這裏直接return，避免報錯。*/
    if (!mounted) return;

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

  @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: <Widget>[
            new RaisedButton(
              onPressed: _getIPAddress,
              child: new Text('獲取天氣預報'),
            ),
            new Text('$_ipAddress.'),
            spacer,
          ],
        ),
      ),
    );
  }
}

注意看上面代碼中的註釋，用到了mounted，參考API，意思是若是state對象實例建立後在執行initState動做前，會關聯上BuildContext對象（對本篇內容好像沒什麼用），此時內置狀態mounted標記爲true，若是state對象實例執行了dispose動做，此時mounted=false，意味着此state對象實例已消亡，代碼走到setState()方法時就會報錯。

第三步

手機鏈接好電腦後，記得打開WIFI或移動網絡。

啓用VScode的Debug工具，調試代碼，如圖所示：

相信有過開發經驗的小夥伴理解上圖應該沒有什麼難度，請盡情把玩吧，APP測試效果：

關閉WIFI後，請求失敗的響應很是快，不會像瀏覽器卡一下才彈出出錯頁面，猜想應該是flutter可以從硬件層探測WIFI或移動網絡是否啓用吧。

能夠看到Dart2語法下的HTTP請求代碼很是簡潔，比起ES5的回調函數用起來方便多了，其外還支持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.
      ...
    });

好啦，今天就介紹到這裏，本篇比較簡單，嫌太少的同窗能夠去文中引用的官方網站練練英語，偷個懶，哈哈哈，感謝你們捧場~
flutter 中文社區（官方QQ羣：338252156）