AngularJS2中如何實現(xiàn)Http服務

這篇文章主要介紹了AngularJS2中如何實現(xiàn)Http服務，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

關于http服務

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

在自定義服務中使用Http服務

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

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);
 }

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

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

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

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

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

信息查詢

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

  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);
  }

修改信息

在自定義服務中

  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告知服務器要修改的記錄標識，JSON.stringify()將對象轉化成json字符串，通過put將字符串放到請求中，header說明了請求體的類型

在調用服務的組件中

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

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

添加信息

在自定義服務中

 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);
}

刪除信息

在自定義服務中

  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ù)組中過濾掉

感謝你能夠認真閱讀完這篇文章，希望小編分享的“AngularJS2中如何實現(xiàn)Http服務”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，更多相關知識等著你來學習!