typescript Angular2 Http 请求
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32096941/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular2 Http Request
提问by Werner Swart
Hi I am trying to make a get request using the HTTPmodule in Angular2.
嗨，我试图让使用GET请求HTTP模块Angular2。
Everything compiles fine in Typescript(1.5), but Chromeshows the following error the in console:
在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)
Services.ts
服务.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()
});
}
}
entry-list.ts
条目列表.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);
});
}
}
app.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
<html>
<head>
<title>SCM</title>
<script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script>
<script src="https://jspm.io/[email protected]"></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>
I did look at the API documentation on the angular.iosite, but can't see whats wrong.
我确实查看了angular.io网站上的 API 文档，但看不出有什么问题。
UPDATE
更新
Services.ts
服务.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()
});
}
}
entry-list.ts
条目列表.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);
});
}
}
app.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);
Without any changes into index.html
没有任何变化 index.html
Edit: My services.ts file changes to get this working:
编辑：我的 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());
}
}
回答by Arnaud Boeglin
You should not instantiate Http yourself, instead get it injected :
您不应该自己实例化 Http，而是将其注入：
public constructor(http : Http) {
this.http = http;
}
The documentation says :
文档说：
Http is available as an injectable class, with methods to perform http requests.
Http 可用作可注入类，具有执行 http 请求的方法。
Therefore I am not sure what is the result if you instantiate it yourself, but somehow it can't manage to do the get request due to some internals that are undefined.
因此，我不确定如果您自己实例化它会产生什么结果，但是由于某些未定义的内部结构，它无法以某种方式执行 get 请求。
Edit: Adding more sources.
编辑：添加更多来源。
@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)));
}
}
Here I added a little part of the Http class from the github repo. You can see that _backend and _defaultOptions are given in the constructor which you don't give, and the method get() will build options for the request based on the options parameter and the _defaultOptions given in the constructor, since you provide none of these, I believe it crashes in the mergeOptions call that you can find here :
在这里，我从 github repo 中添加了 Http 类的一小部分。您可以看到 _backend 和 _defaultOptions 在您没有提供的构造函数中给出，并且 get() 方法将根据构造函数中给出的 options 参数和 _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}));
}
}
At the last if/else of the function. For more information the source file is located here.
在函数的最后一个 if/else。有关更多信息，源文件位于此处。
回答by user2379441
Do you really want to use another library just for CRUD/HTTP requests? **
你真的想为 CRUD/HTTP 请求使用另一个库吗？**
I would highly recommend es6 de-facto fetch then. It not only is simpler in my opinion as of now than angular2/http, but also the standard now and in future versions.
我强烈推荐 es6 de-facto fetch 那么。在我看来，它不仅现在比 angular2/http 更简单，而且现在和未来版本中的标准也是如此。
** It's working out of the box for safari, chrome, ie-edge, and firefox too.
** 它也适用于 safari、chrome、ie-edge 和 firefox。
