在這一步中，你需要更改 PirateName 類以實現從 JSON 文件中獲取名字的列表。這將給你機會添加更多的名字進程序。
## 創建 piratenames.json
使用`File > New File…` 創建一個名為 `piratenames.json` 含有以下內容的 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"]}
關鍵信息
- 文件包含 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 開發者：Futures 和 Promises 一樣。）
把 `names` 和 `appellations` 替換成這些靜態的，空的列表。
class PirateName {
...
static List<String> names = [];
static List<String> appellations = [];
...
}
-
記得從這些聲明中移除 `final` 。
-
`[ ]` 相當于 `new List()` 。
-
List 是一個通用的類型- List 可以包含任何類型的對象。如果你打算讓一個列表只包含字符串，你可以把它聲明成為 `List<String>` 。
添加兩個靜態的方法到 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` 關鍵字標記。一個異步的方法立即返回一個 `Future` ，所以調用者在等待方法完成時有機會做其他事。
-
`HttpRequest` 用來檢索來自 URL 的數據時使用的。
-
`getString()` 是一個方便的方法做一個簡單的 GET 請求并返回字符串。
-
`getString()` 是異步的，它建立了一個 GET 請求，當完成 GET 請求的時候返回一個 `Future`。
-
`await` 表達式，你只可以在異步的方法里使用。執行暫停直到 GET 請求完成。（當 `Future` 在 `getString()` 完成時返回）
- GET 請求返回 JSON 字符串之后，代碼從字符串中提取私有名字和稱謂。
添加一個頂級變量
SpanElement badgeNameElement;
?
void main() {
...
}
- 存儲 span 元素以便重復使用，而不是從 DOM 里重復查詢它。
對 `main()` 函數做這些更改
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` 關鍵字了。去除 `void` 給 `main` 返回值。異步方法必須返回一個將來，所以你可以指定返回類型或讓它空白的。
- 調用 `readyThePirates()` 方法，立即返回一個 Future 。
- 使用 `await` 關鍵字執行暫停直到將來完成。
- 當 將來通過 `readyThePirates()` 成功完成返回，設置界面。
- 使用 `try` 和 `catch` 來檢測和處理錯誤。
## 運行應用
通過 `File > Save All` 保存文件。
運行應用通過正確點擊 `piratebadge.html`，選擇 `Run in Dartium`。
如果你想看到應用找不到 `.json` 文件發生什么，在代碼里改變文件的名字并重新運行這個程序。把你的應用和下面的最終版本對比一下
**圖片 7.1** dart4
