详解AngularJS2 Http服务

决不能习惯失败,因为你要知道,身体的疲惫,不是真正的疲惫;精神上的疲惫,才是真的劳累。

关于http服务

HttpModule并不是angular的核心模块,它是一个附加的模块,存在于@angular/http中,虽然如此但是依然可以在需要的时候使用它,只需要在使用之前引入即可。对于大多数app来说使用http服务是很常见的,所以我们将HttpModule加入到AppModule的import列表和应用的根组件中,这样就可以在整个应用中使用http服务了

在自定义服务中使用Http服务

http服务通过其get方法获取数据,他会返回RxJS Observable,我们希望使用的数据是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);
 }

在回调函数then()中调用了返回对象的json()方法将data从返回对象中分离出来

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

这里的.data是因为返回对象中有data这个属性,具体情况下会不一样

注意:Http failure是经常发生的,必须预料到会有异常的可能,所以在方法最后捕获了异常并将其传递给异常处理器,使用Promise.reject()将错误信息返回给服务调用者

利用服务实现数据的增删改查

信息查询

可以在请求url里面带上参数,这样就可以将参数传到后台,服务器查到信息后返回到前台

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

这步只是将后台的信息删除了,但是本地数组中依然存在,所以依然会在视图中显示,所以就要在组建中进行一些处理

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

这步就是将已经删除的数据从本地数组中过滤掉

本文详解AngularJS2 Http服务到此结束。最快的脚步不是跨越,而是继续;最慢的步伐不是缓慢,而是徘徊;最好的道路不是大道,而是坦荡;最险的道路不是陡坡,而是陷阱;最大的幸福不是得到,而是拥有;最好的财富不是金钱,而是健康;最棒的祝福不是将来,而是现在。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
不使用XMLHttpRequest对象实现Ajax效果的方法小结

HTTP报文及ajax基础知识

关于前端ajax请求的优雅方案(http客户端为axios)

Ajax获取XMLHttp对象的方法

使用Ajax技术通过XMLHttpRequest对象完成首页登录功能