Angular Http - TypeScript

介绍

在 Angular 中，使用 TypeScript 语言，可以通过 Http 模块轻松地进行网络请求和处理响应。Http 是 Angular 提供的一种方式，用于与 RESTful API 或其他服务器通信。本文将介绍如何在 Angular 中使用 Http 模块并展示一些常见的用法。

安装

在开始使用 Angular Http 之前，需要先在项目中安装相应的依赖。可以通过以下命令使用 npm 安装相关模块：

npm install @angular/http --save

安装完成后，需要将 HttpModule 导入到你的 Angular 模块中：

import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';

@NgModule({
  imports: [
    HttpModule
  ]
})
export class AppModule { }

使用

发送 GET 请求

import { Http } from '@angular/http';
import { Injectable } from '@angular/core';

@Injectable()
export class DataService {
  constructor(private http: Http) { }

  getData() {
    return this.http.get('https://api.example.com/data')
      .map(response => response.json());
  }
}

上述代码示例中，我们首先导入 Http 和 Injectable 类。Http 类用于发送 HTTP 请求，Injectable 类用于提供依赖注入。

然后，在 DataService 类中注入 Http 对象，并通过 getData 方法发送 GET 请求。请求的 URL 为 https://api.example.com/data，并使用 map 操作符将响应转换为 JSON 格式。

发送 POST 请求

import { Http, Headers } from '@angular/http';
import { Injectable } from '@angular/core';

@Injectable()
export class DataService {
  constructor(private http: Http) { }

  postData(data: any) {
    let headers = new Headers({ 'Content-Type': 'application/json' });
    return this.http.post('https://api.example.com/data', data, { headers: headers })
      .map(response => response.json());
  }
}

在上述代码示例中，我们首先导入了 Headers 类，用于设置请求头。然后，在 postData 方法中创建一个 Headers 实例，并设置请求头的 Content-Type 为 application/json。

接着，我们使用 Http 的 post 方法发送 POST 请求，并将请求体和请求头传递给方法。返回的响应同样会通过 map 操作符进行转换为 JSON 格式。

使用 Promise

除了使用 map 操作符将响应转换为 Observable 格式，还可以使用 Promise 来处理响应。以下是一个使用 Promise 的示例代码：

import { Http } from '@angular/http';
import { Injectable } from '@angular/core';

@Injectable()
export class DataService {
  constructor(private http: Http) { }

  getData() {
    return this.http.get('https://api.example.com/data')
      .toPromise()
      .then(response => response.json());
  }
}

在上述代码示例中，我们使用 toPromise 方法将 Observable 转换为 Promise。然后使用 then 方法获取 Promise 的结果，并将响应数据转换为 JSON 格式。

总结

Angular Http 提供了简洁和强大的方式来进行网络请求和处理响应。本文介绍了如何在 Angular 中使用 Http 模块，并展示了一些常见的用法，包括发送 GET 和 POST 请求，并通过 map 操作符和 Promise 处理响应。希望这些示例能帮助你更好地理解和使用 Angular Http。