第 7 章 步驟 6：從 JSON 編碼的文件里讀取名字

在這一步中，你需要更改 PirateName 類以實現(xiàn)從 JSON 文件中獲取名字的列表。這將給你機會添加更多的名字進程序。

創(chuàng)建 piratenames.json

使用File > New File… 創(chuàng)建一個名為 piratenames.json 含有以下內(nèi)容的 JSON 編碼的文件。把文件放在 1-blankbadge 你以前寫過的 Dart 和 HTML 文件的旁邊。

{ "names": [ "Anne", "Bette", "Cate", "Dawn",
        "Elise", "Faye", "Ginger", "Harriot",
        "Izzy", "Jane", "Kaye", "Liz",
        "Maria", "Nell", "Olive", "Pat",
        "Queenie", "Rae", "Sal", "Tam",
        "Uma", "Violet", "Wilma", "Xana",
        "Yvonne", "Zelda",
        "Abe", "Billy", "Caleb", "Davie",
        "Eb", "Frank", "Gabe", "House",
        "Icarus", "Jack", "Kurt", "Larry",
        "Mike", "Nolan", "Oliver", "Pat",
        "Quib", "Roy", "Sal", "Tom",
        "Ube", "Val", "Walt", "Xavier",
        "Yvan", "Zeb"],
  "appellations": [ "Awesome", "Captain",
        "Even", "Fighter", "Great", "Hearty",
        "Jackal", "King", "Lord",
        "Mighty", "Noble", "Old", "Powerful",
        "Quick", "Red", "Stalwart", "Tank",
        "Ultimate", "Vicious", "Wily", "aXe", "Young",
        "Brave", "Eager",
        "Kind", "Sandy",
        "Xeric", "Yellow", "Zesty"]}

關(guān)鍵信息

• 文件包含 JSON 編碼的 map ，它包含兩個字符串列表。

編輯 piratebadge.html

顯示輸入框和按鈕

...
  <div>
    <input type="text" id="inputName" maxlength="15" disabled>
  </div>
  <div>
    <button id="generateButton" disabled>Aye! Gimme a name!</button>
  </div>
...

• Dart 代碼啟用輸入框和按鈕，然后名字成功從 JSON 文件中讀出來。

編輯 piratebadge.dart

在文件頂部添加一個 import

import 'dart:html';
import 'dart:math' show Random;
import 'dart:convert' show JSON;
?
import 'dart:async' show Future;

• dart:async 庫提供異步編程。
• Future 提供一個方式在將來得到一個值。（對于 JavaScript 開發(fā)者：Futures 和 Promises 一樣。）

把 names 和 appellations 替換成這些靜態(tài)的，空的列表。

class PirateName {
  ...
  static List<String> names = [];
  static List<String> appellations = [];
  ...
}

• 記得從這些聲明中移除 final 。

• [ ] 相當(dāng)于 new List() 。

• List 是一個通用的類型- List 可以包含任何類型的對象。如果你打算讓一個列表只包含字符串，你可以把它聲明成為 List<String> 。

添加兩個靜態(tài)的方法到 PirateName 類：

class PirateName {
  ...
?
  static Future readyThePirates() async {
    String path = 'piratenames.json';
    String jsonString = await HttpRequest.getString(path);
    _parsePirateNamesFromJSON(jsonString);
  }
?
  static _parsePirateNamesFromJSON(String jsonString) {
    Map pirateNames = JSON.decode(jsonString);
    names = pirateNames['names'];
    appellations = pirateNames['appellations'];
  }
}

• readyThePirates 被 async 關(guān)鍵字標(biāo)記。一個異步的方法立即返回一個 Future ，所以調(diào)用者在等待方法完成時有機會做其他事。

• HttpRequest 用來檢索來自 URL 的數(shù)據(jù)時使用的。

• getString() 是一個方便的方法做一個簡單的 GET 請求并返回字符串。

• getString() 是異步的，它建立了一個 GET 請求，當(dāng)完成 GET 請求的時候返回一個 Future。

• await 表達式，你只可以在異步的方法里使用。執(zhí)行暫停直到 GET 請求完成。（當(dāng) Future 在 getString() 完成時返回）

• GET 請求返回 JSON 字符串之后，代碼從字符串中提取私有名字和稱謂。

添加一個頂級變量

SpanElement badgeNameElement;
?
void main() {
  ...
}

• 存儲 span 元素以便重復(fù)使用，而不是從 DOM 里重復(fù)查詢它。

對 main() 函數(shù)做這些更改

void main() {
  InputElement inputField = querySelector('#inputName');
  inputField.onInput.listen(updateBadge);
  genButton = querySelector('#generateButton');
  genButton.onClick.listen(generateBadge);
?
  badgeNameElement = querySelector('#badgeName');
  ...
}

• 在全局變量存儲這些 span 元素，同時在局部變量里存儲 input 元素。

然后添加代碼獲得 JSON 文件里面的名字，同時處理好異常。

main() async {
  ...
?
  try {
    await PirateName.readyThePirates();
    //on success
    inputField.disabled = false; //enable
    genButton.disabled = false; //enable
    setBadgeName(getBadgeNameFromStorage());
  } catch (arrr) {
    print('Error initializing pirate names: $arrr');
    badgeNameElement.text = 'Arrr! No names.';
  }
}

• async 修飾方法體，這樣方法就可以 async 關(guān)鍵字了。去除 void 給 main 返回值。異步方法必須返回一個將來，所以你可以指定返回類型或讓它空白的。
• 調(diào)用 readyThePirates() 方法，立即返回一個 Future 。
• 使用 await 關(guān)鍵字執(zhí)行暫停直到將來完成。
• 當(dāng) 將來通過 readyThePirates() 成功完成返回，設(shè)置界面。
• 使用 try 和 catch 來檢測和處理錯誤。

運行應(yīng)用

通過 File > Save All 保存文件。

運行應(yīng)用通過正確點擊 piratebadge.html，選擇 Run in Dartium。

如果你想看到應(yīng)用找不到 .json 文件發(fā)生什么，在代碼里改變文件的名字并重新運行這個程序。把你的應(yīng)用和下面的最終版本對比一下