尝试在Angular Dart

时间:2017-08-30 02:50:16

标签: get dart angular-dart

我正在通过Angular Dart学习前端开发的个人项目(我刚刚学习了Django的后端开发。)我很容易与HTTP教程混淆,因为从我作为Web开发人员的角度来看它尝试在不同的文件或地方同时做很多事情,所有相关只是为了一个目的(这样编码可能很有效,但我发现很难从中学习。)我为项目创建了一个API ,我想知道如何从那里建立一个简单的HTTP get请求。

这是我试图显示的JSON对象:

"kanji": "老",
"onyomi": "ロウ",
"kunyomi": "お.いる、ふ.ける",
"nanori": "えび, おい, び",
"rtk_keyword": "old man",
"english": "old man, old age, grow old",
"jlpt": 3,
"jouyou_grade": "4",
"frequency": 803,
"radicals": [
    2555,
    2613
],
"pk": 1267

这是我尝试显示数据失败的原因:

import "dart:async";
import 'dart:convert';

import 'package:angular2/angular2.dart';
import 'package:http/http.dart' as http;
import 'package:http/http.dart';


@Component (
  selector: "test",
  template: """
    <button (click)="change_info()">{{info}}</button>
    """,
)
class Test {
  String info = "default info";
  String _url = 'localhost:8000/kanji_detail/老';

  String get_and_decode(String url) {
    String data_to_return;
    http.get(url).then((response) => data_to_return = JSON.decode(response.body));
    return data_to_return;
  }

  String get_and_decode_long(String url) {
    Response request_response;
    Future request_future;
    String data_to_return;
    request_future = get(url);
    request_future.then((response) => request_response = response);
    data_to_return = JSON.decode(request_response.body);
    return data_to_return;
  }

  change_info() {
    info = get_and_decode_long(_url);
  }

}

get_and_decode_long是我理解在这个过程中涉及到Future和Response,它不是很明显。

1 个答案:

答案 0 :(得分:4)

Future<String> get_and_decode(String url) async {
  var response = await http.get(url);
  return JSON.decode(response.body));
}

无法从异步中恢复同步执行。 async / await可以很容易地使用异步代码。

在您的示例中,return data_to_return;在响应到达之前执行。

另见