您好，我正在尝试使用 Angular2 中的 HTTP 模块发出获取请求。
在 Typescript (1.5) 中一切都可以正常编译，但是 Chrome 在控制台中显示以下错误:
EXCEPTION: Error during instantiation of EntryList!. ORIGINAL
EXCEPTION: TypeError: Cannot read property 'merge' of undefined
ORIGINAL STACKTRACE: TypeError: Cannot read property 'merge' of undefined
at mergeOptions (angular2.dev.js:27991)
at execute.Http.get (angular2.dev.js:28052)
at EntryService.getEntries (services.js:17)
at new EntryList (entry-list.js:20)
服务.ts
/// <reference path="../typings/angular2/angular2.d.ts" />
import { Http, Observable } from "angular2/angular2"
export class EntryService {
private _entries: Array<string>;
private _http : Http;
constructor() {
this._entries = ["test1", "test2", "test3"];
this._http = new Http;
}
get Entries() : Array<string> {
return this._entries;
}
getEntries()
{
console.log(this._http);
return this._http.get('http://localhost:53338/api/decisions')
.toRx()
.map((response) => {
response.json()
});
}
}
条目列表.ts
/// <reference path="../typings/angular2/angular2.d.ts" />
/// <reference path="../modules/services.ts" />
import { Component, View, NgFor } from "angular2/angular2"
import { EntryService } from "modules/services"
@Component({
selector: 'entry-list'
})
@View({
directives: [ NgFor ],
templateUrl: "../views/entry-list.html"
})
export class EntryList {
entries: Array<string>;
constructor(public service: EntryService) {
this.entries = this.service.Entries;
this.service.getEntries().subscribe((response) => {
console.log(response);
});
}
}
应用.ts
/// <reference path="typings/angular2/angular2.d.ts" />
/// <reference path="components/entry-list.ts" />
/// <reference path="modules/services.ts" />
import { Component, View, bootstrap, NgFor } from "angular2/angular2"
import { EntryList } from "components/entry-list"
import { EntryService } from "modules/services"
@Component({
selector : "app",
bindings: [ EntryService ]
})
@View({
directives: [ EntryList ],
templateUrl: "views/app.html"
})
class App {
constructor() {
console.log('hit');
}
}
bootstrap(App);
index.html
<html>
<head>
<title>SCM</title>
<script src="https://github.jspm.io/jmcriffey/bower-traceur-runtime@0.0.88/traceur-runtime.js"></script>
<script src="https://jspm.io/system@0.16.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.34/angular2.dev.js"></script>
</head>
<body>
<app></app>
<script>System.import('app')</script>
</body>
</html>
我确实查看了 angular.io 站点上的 API 文档，但看不出有什么问题。
更新
服务.ts
/// <reference path="../typings/angular2/angular2.d.ts" />
import { Http, Observable, httpInjectables } from "angular2/angular2"
export class EntryService {
private _entries: Array<string>;
constructor(private http: Http) {
this._entries = ["test1", "test2", "test3"];
}
get Entries() : Array<string> {
return this._entries;
}
getEntries()
{
console.log(this.http);
return this.http.get('http://localhost:53338/api/decisions')
.toRx()
.map((response) => {
response.json()
});
}
}
条目列表.ts
/// <reference path="../typings/angular2/angular2.d.ts" />
/// <reference path="../modules/services.ts" />
import { Component, View, NgFor, Http, httpInjectables } from "angular2/angular2"
import { EntryService } from "modules/services"
@Component({
selector: 'entry-list',
bindings : [ Http, httpInjectables ]
})
@View({
directives: [ NgFor ],
templateUrl: "../views/entry-list.html"
})
export class EntryList {
entries: Array<string>;
constructor(public service: EntryService) {
this.entries = this.service.Entries;
this.service.getEntries().subscribe((response) => {
console.log(response);
});
}
}
应用.ts
/// <reference path="typings/angular2/angular2.d.ts" />
/// <reference path="components/entry-list.ts" />
/// <reference path="modules/services.ts" />
import { Component, View, bootstrap, NgFor, Http, httpInjectables } from "angular2/angular2"
import { EntryList } from "components/entry-list"
import { EntryService } from "modules/services"
@Component({
selector : "app",
bindings: [ EntryService, Http, httpInjectables ]
})
@View({
directives: [ EntryList ],
templateUrl: "views/app.html"
})
class App {
constructor() {
console.log('hit');
}
}
bootstrap(App);
index.html 没有任何变化
编辑:我的 services.ts 文件更改以使其正常工作:
/// <reference path="../typings/angular2/angular2.d.ts" />
import { Injector, Http, httpInjectables } from "angular2/angular2"
export class EntryService {
private _entries: Array<string>;
private http: Http;
constructor() {
this._entries = ["test1", "test2", "test3"];
var injector = Injector.resolveAndCreate([
httpInjectables,
Http
]);
this.http = injector.get(Http);
}
get Entries() : Array<string> {
return this._entries;
}
getEntries()
{
return this.http.get('http://localhost:53338/api/decisions')
.toRx()
.map(response => response.json());
}
}
最佳答案
你不应该自己实例化 Http，而是注入(inject)它:
public constructor(http : Http) {
this.http = http;
}
文档说:
Http is available as an injectable class, with methods to perform http requests.
因此，我不确定如果您自己实例化它会产生什么结果，但由于某些未定义的内部结构，它无法以某种方式执行获取请求。
编辑:添加更多来源。
@Injectable()
export class Http {
constructor(protected _backend: ConnectionBackend, protected _defaultOptions: RequestOptions) {}
/**
* Performs a request with `get` http method.
*/
get(url: string, options?: RequestOptionsArgs): EventEmitter {
return httpRequest(this._backend, new Request(mergeOptions(this._defaultOptions, options, RequestMethods.GET, url)));
}
}
在这里，我添加了来自 github 存储库的 Http 类的一小部分。您可以看到 _backend 和 _defaultOptions 在您没有提供的构造函数中给出，方法 get() 将根据构造函数中提供的选项参数和 _defaultOptions 为请求构建选项，因为您没有提供这些，我相信它会在您可以在此处找到的 mergeOptions 调用中崩溃:
function mergeOptions(defaultOpts, providedOpts, method, url): RequestOptions {
var newOptions = defaultOpts;
if (isPresent(providedOpts)) {
// Hack so Dart can used named parameters
newOptions = newOptions.merge(new RequestOptions({
method: providedOpts.method,
url: providedOpts.url,
search: providedOpts.search,
headers: providedOpts.headers,
body: providedOpts.body,
mode: providedOpts.mode,
credentials: providedOpts.credentials,
cache: providedOpts.cache
}));
}
if (isPresent(method)) {
return newOptions.merge(new RequestOptions({method: method, url: url}));
} else {
return newOptions.merge(new RequestOptions({url: url}));
}
}
在函数的最后一个 if/else。有关更多信息，源文件位于 here .
关于javascript - Angular2 Http 请求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32096941/