Angular服务Request异步请求的实例讲解

下面是关于“Angular服务Request异步请求的实例讲解”的完整攻略。

下面是关于“Angular服务Request异步请求的实例讲解”的完整攻略。

标题:Angular服务Request异步请求的实例讲解

什么是Angular服务Request?

Angular服务Request是Angular框架内置的一个服务,主要用于发送异步HTTP请求。Request服务是通过Angular注入系统使用的,因此我们只需要在组件或其他服务中引入Request服务,就可以使用它发送HTTP请求。

如何使用请求服务?

Request服务是通过HTTP方法发送请求的,我们可以使用以下HTTP方法之一:

  • get:获取数据
  • post:提交数据
  • put:更新数据
  • delete:删除数据

主要步骤包括:

  1. 导入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) { }
}
  1. 构建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'));
}
  1. 构建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异步请求的实例讲解

基础教程推荐