Dart 使用HttpRequest对象以及getString加载Json数据

Dart 使用HttpRequest 加载

import 'dart:html';
import 'dart:async'; // 数据请求
import 'dart:convert'; // Json 解析

UListElement wordList = querySelector('#wordList');

void main() {
  querySelector('#getWords').onClick.listen(makeRequest);
}

/* 使用HttpRequest 加载
 */
Future<void> makeRequest(Event _) async {
  wordList.children.clear(); // 请求之前清空数组
  const path = 'https://www.dartlang.org/f/portmanteaux.json';
  final httpRequest = HttpRequest();
  httpRequest
    ..open('GET', path)
    ..onLoadEnd.listen((e) => requestComplete(httpRequest))
    ..send();
}
void requestComplete (HttpRequest request) {
  switch (request.status) {
    case 200:
      processResponse(request.responseText);
      return;
    default:
      final li = LIElement()..text = '数据请求失败, status=${request.status}';
      wordList.children.add(li);
  }
}

void processResponse (String jsonString) {
  for (final portmanteau in json.decode(jsonString)) {
    wordList.children.add(LIElement()..text = portmanteau);
  }
}

Dart 使用Get String 加载

import 'dart:html';
import 'dart:async'; // 数据请求
import 'dart:convert'; // Json 解析

UListElement wordList = querySelector('#wordList');

void main() {
  querySelector('#getWords').onClick.listen(makeRequest);
}

/* 使用Get String 加载
 */
Future<void> makeRequest(Event _) async {

  const path = 'https://www.dartlang.org/f/portmanteaux.json';

  try {
    //发起GET 请求
    final jsonString = await HttpRequest.getString(path);
    // 请求成功，处理Json
    processResponse(jsonString);
  } catch (e) {
    // GET请求失败， 处理错误
    print('不能打开 $path');
    wordList.children.add(LIElement()..text = '数据请求失败');
  }
}

共用HTML 数据展示页面

  <div>
      <h1>请求Json数据</h1>
      <button id="getWords">请求数据</button>
      <ul id="wordList"></ul>
  </div>