下面是关于“Angular服务Request异步请求的实例讲解”的完整攻略。
下面是关于“Angular服务Request异步请求的实例讲解”的完整攻略。
标题:Angular服务Request异步请求的实例讲解
什么是Angular服务Request?
Angular服务Request是Angular框架内置的一个服务,主要用于发送异步HTTP请求。Request服务是通过Angular注入系统使用的,因此我们只需要在组件或其他服务中引入Request服务,就可以使用它发送HTTP请求。
如何使用请求服务?
Request服务是通过HTTP方法发送请求的,我们可以使用以下HTTP方法之一:
- get:获取数据
- post:提交数据
- put:更新数据
- delete:删除数据
主要步骤包括:
- 导入Request服务
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/Rx';
@Injectable()
export class MyService {
constructor(private http: Http) { }
}
- 构建GET请求
get(url: string): Observable<any> {
return this.http.get(url)
.map((response: any) => response.json())
.catch((error: any) => Observable.throw(error.json() || 'Server error'));
}
- 构建POST请求
post(url: string, body: any): Observable<any> {
let headers = new Headers({ 'Content-Type': 'application/json' });
return this.http.post(url, body, { headers: headers })
.map((response: any) => response.json())
.catch((error: any) => Observable.throw(error.json() || 'Server error'));
}
示例1:使用Request服务获取数据
在组件中导入MyService,在构造函数中注入MyService,然后在方法中使用get()方法获取数据。
import { Component } from '@angular/core';
import { MyService } from './my.service';
@Component({
selector: 'my-app',
template: '<ul><li *ngFor="let item of items">{{item.title}}</li></ul>',
providers: [MyService]
})
export class AppComponent {
items: any[] = [];
constructor(private myService: MyService) {
this.myService.get('http://jsonplaceholder.typicode.com/posts').subscribe(data => this.items = data);
}
}
示例2:使用Request服务提交数据
在组件中导入MyService,在构造函数中注入MyService,然后在方法中使用post()方法提交数据。
import { Component } from '@angular/core';
import { MyService } from './my.service';
@Component({
selector: 'my-app',
template: '<form (submit)="submitForm()"><input type="text" [(ngModel)]="title"/><input type="text" [(ngModel)]="body"/><button>提交</button></form>',
providers: [MyService]
})
export class AppComponent {
title: string;
body: string;
constructor(private myService: MyService) {}
submitForm() {
this.myService.post('http://jsonplaceholder.typicode.com/posts', { title: this.title, body: this.body }).subscribe();
}
}
以上就是关于“Angular服务Request异步请求的实例讲解”的完整攻略。
沃梦达教程
本文标题为:Angular服务Request异步请求的实例讲解
基础教程推荐
猜你喜欢
- 基于JS实现点击图片在弹出层显示大图效果 2022-08-31
- 简易日历(innerHTML) 2023-10-28
- Ajax实现图片上传并预览功能 2023-02-15
- sublime / vscode 快捷生成HTML代码的实现 2022-09-20
- ajax判断后端返回的数据是否为null的方法 2023-02-15
- 常用JavaScript代码提示公共类封装 2024-01-07
- 纯HTML5+CSS3制作生日蛋糕代码 2024-01-23
- 全屏js头像上传插件源码高清版 2024-01-05
- TS如何从目录中提取所有指定扩展名的文件 2023-07-09
- html+css实现分层金字塔的实例 2022-09-20