Question

我正在编写AngularDart教程的修改版本。我正在根据开发人员指南/ HTTP客户端中的示例添加服务器调用。我试图连接到同一台机器上的实际服务器，而不是内存服务。我已经在我的Rails应用程序中使用HTTPRequest在普通Dart中工作了。在我的新AngularDart独立客户端中，我收到错误：

TypeError: this.get$BrowserClient is not a function

我怀疑这可能会发生，因为我从未在main.dart中创建内存服务器。如果是这样，与真实服务器通信的正确代码是什么？

我的服务类：

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

import 'package:angular2/core.dart';

import 'artist.dart';
import 'package:http/browser_client.dart';
import 'package:http/http.dart';

@Injectable()

class ArtistService {
  static const _artistsUrl = 'http://jazzcatold.loc/artists?page=1'; // URL to RAILS server
  final BrowserClient _http;
  ArtistService(this._http);

  Future<List<Artist>> getArtists() async {
    try {
      final response = await _http.get(_artistsUrl,
          headers: {'Accept': 'application/json'});
      final artists = _extractData(response)
          .map((value) => new Artist.fromJson(value))
          .toList();
      return artists;
    } catch (e) {
      throw _handleError(e);
    }
  }

...

我的main.dart是：

import 'package:angular2/platform/browser.dart';
import 'package:jazzcat/app_component.dart';

main() {
  bootstrap(AppComponent);
}

示例有：

import 'package:angular2/core.dart';
import 'package:angular2/platform/browser.dart';
import 'package:http/browser_client.dart';

import 'package:server_communication/app_component.dart';
import "package:server_communication/hero_data.dart";

void main() {
  bootstrap(AppComponent, const [
    // in-memory web api provider
    const Provider(BrowserClient,
        useFactory: HttpClientBackendServiceFactory, deps: const [])
    // TODO: drop `deps` once fix lands for 
    // https://github.com/angular/angular/issues/5266
  ]);
}

B计划

我从给出的链接中尝试了这个：

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


@Injectable()

class ArtistService {
  static const _artistsUrl = 'http://jazzcatold.loc/artists?page=1'; // URL to RAILS server

  Future<List<Artist>> getArtists() async {
    final response = await http.get(_artistsUrl, headers: {'Accept':    'application/json'});
    final artists = _extractData(response)
        .map((value) => new Artist.fromJson(value))
        .toList();
    return artists;
  }

我收到了错误：

EXCEPTION: Unsupported operation: IOClient isn't supported on this platform.

计划C

我修改了另一个项目的工作代码：

import 'dart:html';

@Injectable()

class ArtistService {
  static const _artistsUrl = 'http://jazzcatold.loc/artists?page=1'; // URL to  RAILS server
  Map headers = {'Accept': 'application/json'};

  Future<List<Artist>> getArtists() async {
  final response = await HttpRequest.request(_artistsUrl, requestHeaders: headers);
  final artists = _extractData(response)
      .map((value) => new Artist.fromJson(value))
      .toList();
  return artists;
  }

当我检查Chrome检查器上的网络数据时，我看到要返回的JSON数据。我收到了错误：

html_dart2js.dart:3352 EXCEPTION: NoSuchMethodError: method not found:   'get$body' (J.getInterceptor$x(...).get$body is not a function)

代码可能不适合getArtists结构。

Answer 1

您无法在独立应用程序中导入http/browser_client.dart。这只应该用于浏览器应用程序。

有关如何将其用于独立应用程序的示例，请参阅https://pub.dartlang.org/packages/http。

Answer 2

答案是上述计划C的工作版本。

import 'dart:async';
import 'dart:convert';
import 'package:angular2/core.dart';

import 'artist.dart';
import 'dart:html';


@Injectable()

class ArtistService {
  static const url = 'http://jazzcatold.loc/artists?page=1'; // URL to RAILS server
  Map headers = {'Accept': 'application/json'};

  Future<List<Artist>> getArtists() async {
    HttpRequest response = await HttpRequest.request(url, requestHeaders: headers);
    List data = JSON.decode(response.responseText);
    final artists = data
          .map((value) => new Artist.fromJson(value))
          .toList();
    return artists;
  }

我将_extractData方法汇总到这个方法中。我还根据Günter在其他地方的建议更准确地编写了它。上面的getBody错误位于未显示的extractData方法中。

获取：“TypeError：this.get $ BrowserClient不是函数”

B计划

计划C

2 个答案: