詳解AngularJS2 Http服務(wù)

更新時間：2017年06月26日 14:08:58 作者：Ranest

本篇文章主要介紹了詳解AngularJS2 Http服務(wù)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

關(guān)于http服務(wù)

HttpModule并不是angular的核心模塊，它是一個附加的模塊，存在于@angular/http中，雖然如此但是依然可以在需要的時候使用它，只需要在使用之前引入即可。對于大多數(shù)app來說使用http服務(wù)是很常見的，所以我們將HttpModule加入到AppModule的import列表和應(yīng)用的根組件中，這樣就可以在整個應(yīng)用中使用http服務(wù)了

在自定義服務(wù)中使用Http服務(wù)

http服務(wù)通過其get方法獲取數(shù)據(jù)，他會返回RxJS Observable，我們希望使用的數(shù)據(jù)是Promise，然而 Observable 并沒有toPromise（）方法，可以在自定義服務(wù)中這樣引入

import 'rxjs/add/operator/toPromise';

如此就拓展了Observable的功能了

具體代碼如下

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

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

import 'rxjs/add/operator/toPromise';

import { Hero } from './hero';
 private heroesUrl = 'api/heroes'; // URL to web api

 constructor(private http: Http) { }

 getHeroes(): Promise<Hero[]> {
  return this.http.get(this.heroesUrl)
        .toPromise()
        .then(response => response.json().data as Hero[])
        .catch(this.handleError);
 }

 private handleError(error: any): Promise<any> {
  console.error('An error occurred', error); // for demo purposes only
  return Promise.reject(error.message || error);
 }

在回調(diào)函數(shù)then()中調(diào)用了返回對象的json()方法將data從返回對象中分離出來

.then(response => response.json().data as Hero[])

這里的.data是因為返回對象中有data這個屬性，具體情況下會不一樣

注意：Http failure是經(jīng)常發(fā)生的，必須預(yù)料到會有異常的可能，所以在方法最后捕獲了異常并將其傳遞給異常處理器，使用Promise.reject()將錯誤信息返回給服務(wù)調(diào)用者

利用服務(wù)實現(xiàn)數(shù)據(jù)的增刪改查

信息查詢

可以在請求url里面帶上參數(shù)，這樣就可以將參數(shù)傳到后臺，服務(wù)器查到信息后返回到前臺

  getHero(id: number): Promise<Hero> {
    const url = `${this.heroesUrl}/${id}`;
    return this.http.get(url).toPromise()
   .then(response => response.json().data as Hero)
   .catch(this.handleError);
  }

修改信息

在自定義服務(wù)中

  private headers = new Headers({'Content-Type': 'application/json'});
  update(hero: Hero): Promise<Hero> {
  const url = `${this.heroesUrl}/${hero.id}`;
  return this.http
  .put(url, JSON.stringify(hero), {headers: this.headers})
  .toPromise()
  .then(() => hero)
  .catch(this.handleError);
}

依然是在url后帶上id告知服務(wù)器要修改的記錄標(biāo)識，JSON.stringify()將對象轉(zhuǎn)化成json字符串，通過put將字符串放到請求中，header說明了請求體的類型

在調(diào)用服務(wù)的組件中

   save(): void {
   this.heroService.update(this.hero)
    .then(() => this.goBack());
  }

修改成功后返回前一個視圖

添加信息

在自定義服務(wù)中

 create(name: string): Promise<Hero> {
 return this.http
  .post(this.heroesUrl, JSON.stringify({name: name}), {headers: this.headers})
  .toPromise()
  .then(res => res.json().data)
  .catch(this.handleError);
}

刪除信息

在自定義服務(wù)中

  delete(id: number): Promise<void> {
   const url = `${this.heroesUrl}/${id}`;
   return this.http.delete(url, {headers: this.headers})
    .toPromise()
    .then(() => null)
    .catch(this.handleError);
  }

這步只是將后臺的信息刪除了，但是本地數(shù)組中依然存在，所以依然會在視圖中顯示，所以就要在組建中進行一些處理

delete(hero: Hero): void {
 this.heroService
   .delete(hero.id)
   .then(() => {
    this.heroes = this.heroes.filter(h => h !== hero);
    if (this.selectedHero === hero) { this.selectedHero = null; }
   });
}

這步就是將已經(jīng)刪除的數(shù)據(jù)從本地數(shù)組中過濾掉

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: