1. 简介
作为一名前端开发人员，我们经常需要从服务器端获取数据。Angular 框架中提供了 HTTP 模块来方便我们与服务器进行交互，获取数据。本文就是一份指南，帮助你学习在 Angular 应用中如何使用 HTTP 模块。
2. 安装 HTTP 模块
在你开始使用 HTTP 模块前，你需要先安装它。你可以使用以下命令：
npm install @angular/common@latest @angular/compiler@latest @angular/core@latest npm install @angular/http@latest
安装成功后，在你的模块中导入 HTTP 模块：
// javascriptcn.com 代码示例
import { HttpModule } from '@angular/http';
@NgModule({
imports: [
BrowserModule,
HttpModule
],
// ...
})
export class AppModule { }3. HTTP 请求
3.1 发送 GET 请求
下面的例子向服务器发送一个 GET 请求，并将响应数据作为一个 Observable 返回。
// javascriptcn.com 代码示例
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
@Component({
selector: 'app-http-get',
template: `
<button (click)="onClick()">Get Data</button>
<p>{{response}}</p>
`
})
export class HttpGetComponent implements OnInit {
response: string;
constructor(private http: Http) {}
ngOnInit() {}
onClick() {
this.http.get('https://jsonplaceholder.typicode.com/todos/1')
.subscribe(data => this.response = data.json());
}
}3.2 发送 POST 请求
下面的例子向服务器发送一个 POST 请求，并将响应数据作为一个 Observable 返回。
// javascriptcn.com 代码示例
import { Component, OnInit } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
@Component({
selector: 'app-http-post',
template: `
<button (click)="onClick()">Post Data</button>
<p>{{response}}</p>
`
})
export class HttpPostComponent implements OnInit {
response: string;
constructor(private http: Http) {}
ngOnInit() {}
onClick() {
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
let body = JSON.stringify({ title: 'foo', body: 'bar', userId: 1 });
this.http.post('https://jsonplaceholder.typicode.com/posts', body, options)
.subscribe(data => this.response = data.json());
}
}3.3 发送 PUT 请求
下面的例子向服务器发送一个 PUT 请求，并将响应数据作为一个 Observable 返回。
// javascriptcn.com 代码示例
import { Component, OnInit } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
@Component({
selector: 'app-http-put',
template: `
<button (click)="onClick()">Put Data</button>
<p>{{response}}</p>
`
})
export class HttpPutComponent implements OnInit {
response: string;
constructor(private http: Http) {}
ngOnInit() {}
onClick() {
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
let body = JSON.stringify({ id: 1, title: 'foo', body: 'bar', userId: 1 });
this.http.put('https://jsonplaceholder.typicode.com/posts/1', body, options)
.subscribe(data => this.response = data.json());
}
}3.4 发送 DELETE 请求
下面的例子向服务器发送一个 DELETE 请求，并将响应数据作为一个 Observable 返回。
// javascriptcn.com 代码示例
import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
@Component({
selector: 'app-http-delete',
template: `
<button (click)="onClick()">Delete Data</button>
<p>{{response}}</p>
`
})
export class HttpDeleteComponent implements OnInit {
response: string;
constructor(private http: Http) {}
ngOnInit() {}
onClick() {
this.http.delete('https://jsonplaceholder.typicode.com/posts/1')
.subscribe(data => this.response = data.json());
}
}4. 更多配置
4.1 添加请求头
你可以通过创建 Headers 对象来添加请求头：
let headers = new Headers();
headers.append('Authorization', 'Bearer H8W51DlewFH');
this.http.get('http://api.domain.com/data', { headers: headers });4.2 添加 URL 参数
你可以通过对请求 URL 添加查询字符串参数来向服务器发送数据：
import { URLSearchParams } from '@angular/http';
let search = new URLSearchParams();
search.set('param1', 'value1');
search.set('param2', 'value2');
this.http.get('http://api.domain.com/data', { search });4.3 超时时间
使用以下方法，你可以设置请求超时时间：
import { RequestOptions } from '@angular/http';
let options = new RequestOptions({ timeout: 5000 });
this.http.get('http://api.domain.com/data', options);5. 总结
在 Angular 应用中使用 HTTP 模块可以帮助我们轻松地获取数据。在本文中，我们介绍了如何发送 GET、POST、PUT 和 DELETE 请求，并设置更多配置。希望这篇指南对你有帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6549e7447d4982a6eb41cc78