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异步请求的实例讲解”的完整攻略。