如何使用 angular2/http 进行 ajax 调用？答案

【问题标题】：How to make ajax call with angular2/http?如何使用 angular2/http 进行 ajax 调用？
【发布时间】：2016-04-01 04:24:14
【问题描述】：

我正在使用带有打字稿的 Angular 2.0.0-beta.0。我能够使用 window['fetch'] 开箱即用地进行 ajax 调用，没有任何问题（而且我不需要使用早期版本中所需的任何解决方法。）

但我无法使用 angular2 的 http 进行相同的 ajax 调用。

这是演示问题的代码。项目文件夹中有 index.html 三个文件，app 子文件夹中有 boot.ts 和 app.component.ts。

app.component.ts：

import {Http, HTTP_PROVIDERS} from 'angular2/http';
import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    providers: [HTTP_PROVIDERS],
    template: '<h1>My First Angular 2 App</h1><button (click)="getTasks()">click</button>{{tasks}}'
})
export class AppComponent { 
    http: Http;
    tasks = [];

    constructor(http: Http) {
        alert(http == null);
        this.http = http;
    }

    getTasks(): void {
        this.http.get('http://localhost:3000/tasks/norender');
            //.map((res: Response) => res.json())

            //it is important to have this subscribe call, since the 
            //request is only made if there is a subscriber 
            .subscribe(res => this.tasks = res);
    }   
}

boot.ts：

import {bootstrap} from 'angular2/platform/browser'
import {HTTP_PROVIDERS} from 'angular2/http';
import {AppComponent} from './app.component'

bootstrap(AppComponent, [HTTP_PROVIDERS]);

index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <!-- 1. Load libraries -->
        <script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
        <script src="https://code.angularjs.org/tools/typescript.js"></script>
        <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
        <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
        <script src="https://code.angularjs.org/2.0.0-beta.0/http.dev.js"></script>
        <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
        System.config({
            transpiler: 'typescript', 
            typescriptOptions: {emitDecoratorMetadata: true}, 
            packages: {'app': {defaultExtension: 'ts'}} 
        });
        System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

【问题讨论】：

会有什么问题/错误？
您是否在引导程序中添加了HTTP_PROVIDERS？
对于我在您更新的代码中看到的内容，您需要取消注释 subscribe，因为这是触发请求的部分。
就是这样！感谢@EricMartinez，所以它很聪明，只有在结果被消耗时才会发出请求。谢谢！
你不应该在bootstrap() 和providers: [...] 中有HTTP_PROVIDERS。选择一个。

标签： http dependency-injection typescript angular

【解决方案1】：

您应该添加一个 Http 提供程序。你有两个选择：

在引导上：

import {HTTP_PROVIDERS} from 'angular2/http';

和：

ng.bootstrap(src.SomeComponent, [HTTP_PROVIDERS]);

关于使用服务的组件：

从 'angular2/http' 导入 {HTTP_PROVIDERS}；

@组件（{

...

提供者：[HTTP_PROVIDERS]

...
})

【讨论】：

【解决方案2】：

当我使用旧版本的 TypeScript 编译器时，我遇到了类似的问题。我通过将构造函数参数从http: Http 更改为@Inject(Http) http: Http 来修复它。当然需要导入Inject才能使用。

我会尝试使用https://code.angularjs.org/tools/system.js 上的 SystemJS 版本，而不是 rawgithub.com 上的版本。

【讨论】：