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

【问题标题】：Getting: "TypeError: this.get$BrowserClient is not a function"获取：“TypeError：this.get$BrowserClient 不是函数”
【发布时间】：2016-06-20 19:39:52
【问题描述】：

我正在编写 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 结构。

【问题讨论】：

标签： http angular dart

【解决方案1】：

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

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

【讨论】：

独立，我的意思是不属于 Ruby on Rails 应用程序的一部分。我正在运行它，就像教程一一样。我在运行 pub serve 的情况下在 Chrome 中调用 localhost:8080 。那仍然是一个独立的应用程序吗？
Standalone 是一个控制台应用程序，您可以从命令行而不是在浏览器中运行。

【解决方案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 方法中。

【讨论】：