Angular 4+ Http

HTTP: 使应用能够对远端服务器发起相应的Http调用；

你要知道：

 HttpModule并不是Angular的核心模块，它是Angualr用来进行Web访问的一种可选方式，并位于一个名叫@angual/http的独立附属模块中；也就是说：使用http之前要引入此模块;

1.基本使用：

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import {HttpModule} from '@angular/http';  /*引入它*/
    import { AppComponent } from './app.component';
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        HttpModule  /*导入*/
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

注意，现在HttpModule已经是根模块AppModule的imports数组的一部分了;

2.介绍模拟web api 发送请求

注意：是在你没有真实的远程服务请求地址时，自己模拟一个web服务，用于测试代码；倘若有真实的远程服务器，则不需要这个；

  2.1 引入InMemoryWebApiModule，这是Angular提供的一个辅助服务，负责与远程服务器对话 — 替换成了内存 Web API服务，类似于后端服务；

import { InMemoryWebApiModule } from 'angular-in-memory-web-api';

注意：导入这个，如果出现错误，可能是你的node-module 文件库里面没有此库，这时候打开你的package.json文件：

 "dependencies"

里面配置这样一句：

"angular-in-memory-web-api": "^0.3.2"

重新运行npm install ；

  2.2 向内存服务中注入数据，如果没有数据是不能运行的；

import { InMemoryDataService }  from './in-memory-data.service';

注意几点：

    in-memory-data.service.ts 文件是你自己创建的，用来存放实例数据的；
    in-memory-data.service.ts 这样写：
    import { InMemoryDbService } from 'angular-in-memory-web-api';
    export class InMemoryDataService  implements InMemoryDbService{
       createDb() {
        const heroes = [
          { id: 0,  name: 'Zero' },
          { id: 1, name: 'Mr. Nice' },
          { id: 2, name: 'Narco' },
          { id: 3, name: 'Bombasto' },
        ];
        return {heroes};
      }
    }

3.这里相当于自己创建了一个内部数据库；

  2.3 导入的文件如何在app.module.ts中注入：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {HttpModule} from '@angular/http';
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService }  from './in-memory-data.service';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    InMemoryWebApiModule.forRoot(InMemoryDataService),  /*这样注入*/
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这里现在就是全部代码；

3.如何发起http请求；

  3.1创建一个服务；

import {Injectable} from '@angular/core';
@Injectable()
export class HeroService{
}

angular 中所有创建服务的模式都是这样，我们创建了一个HeroService的文件，下载要在app.module.ts中注入它；

import {HeroService} from './hero.service';
  providers: [HeroService],
  bootstrap: [AppComponent]

注意：

1.providers 是专门用来注入服务的；
2. 可以在app.module.ts里的providers中注入服务，也可以在你的子模块和组件中注入，
前者是共享的服务，一次注入，整个项目都有效，如果在子模块中或者子组件中注入，这只是你属于当前模块或当前组件下有效，其他的组件需要使用，都得自己重新注入；
一般情况下：返回的是一个能解析的promise(承诺)

 3.2  引入http  ;

import {Http} from '@angular/http';
constructor(private http:Http){ }

一定要在构造里创建它；

3.3 尝试获取内存数据库里面的信息；

 import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/toPromise';
import {Hero} from './hero';
@Injectable()
export class HeroService{
    constructor(private http:Http){ 
 /*注释1*/  private heroUrl='api/heroes';
 /*注释2*/     getHeroes(): Promise<Hero[]>{
                return this.http.get(this.heroUrl)
 /*注释3*/             .toPromise()
 /*注释4*/             .then(response =>response.json().data as Hero[])
/*注释5*/              .catch((error: any) => Promise.reject(error || 'Server error'));
                          }
                     }

现在我写了一个getHeroes()的方法：

解析几点：

 注释1：http请求肯定需要Url地址，这里需要导入数据库里面的名；api/heroes 其实就是你内存数据库 web api里面

return {heroes};

根据你返回的值，调用相应的api地址；

 注释2： 使用的是http承诺（promise），一定要有返回值，返回的是一个可以解析成英雄列表的Observable对象 ,也就是我们的Hero；也就是需要导入这个

import {Hero} from './hero';

hero.ts文件包含：

export class Hero{
    id:number;
    name:string;
}

Observable（可观察对象）是一个管理异步数据流的强力方式，后续会学习；

注释3： .toPromise会将我们得到的Observable对象转化成promise对象；

  但是Angular中的observable对象并没有一个topromise操作符，这里就需要借助其他工具，

import 'rxjs/add/operator/toPromise';

更多详细的可以看rxjs库操作符；

注释4：在 then 回调中提取出数据，这也是angular中一大特点，默认 JSON 解析,这个由json方法返回的对象只有一个data属性。 
  这个data属性保存了英雄数组，这个数组才是调用者真正想要的。 所以我们取得这个数组，并且把它作为承诺的值进行解析 

注意：web api 返回的是带有data属性的对象，而你真是的api可以返回其他值的；

 注释5：错误处理,有异常很正常，我们可以将他们传给错误处理器；现在我们只是将错误记录到控制台，真实案例中，可以将错误进行处理；

4. 如何将获得的数据显示在界面；

  4.1 组件中调用Hero.service.ts；

import { Component } from '@angular/core';
import {HeroService} from './hero.service';
import {Hero}  from './hero';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 /*注释1*/ hero:Hero[];
 /*注释2*/ constructor(private service:HeroService){
             this.getHeroes();
            }
          getHeroes(){
/*注释3*/     this.service.getHeroes().then(
               hero=>{
                 this.hero=hero;
                  console.log(this.hero);
                    }
/*注释4*/     ).catch((error: any) => Promise.reject(error || 'client error'))
           }
}

注释1： 用来接收返回的对象；
注释2： 对引入的hero.service.ts服务初始化；
注释3： 返回的是promise对象，用then方法去解析得到的值；
注释4： 预期会犯错，抛出异常；

现在可以看看控制台打印的hero对象：

 

如何显示在我们的html上呢？

 <ul *ngFor="let a of hero">
   <li>{{a.id}} : {{a.name}}</li>
 </ul>

简单的写了这样一段：

这里注意：多对数组或对象形式用*ngFor遍历；

运行localhost:4200,这样就可以让数据正常显示啦；

 这里介绍的是采用promise的形式调用http的方法，原理就是：hero.service中，http.get()返回的Observable后面串联了一个toPromise操作符。 该操作符把Observable转换成了Promise，并且我们把那个承诺返回给了调用者；

5. http promise还能做什么？

  5.1 尝试通过id获取英雄；

  hero.service.ts中添加这段代码：

 getHero(id:number):Promise<Hero>{
         const url = `${this.heroUrl}/${id}`;
         return this.http.get(url)
         .toPromise()
         .then(response =>
                 response.json().data as Hero,  
          )
         .catch((error: any) => Promise.reject(error || 'Server error'));
     }

和获取所有英雄的方法类似，这个的步骤是先获取所有的英雄，并从中过滤出与id匹配的那一个；

匹配api/hero/:id 模式，有点像路由；

  5.2 组件中如何调用；

  detailhero:Hero;

getHero(id:number){
    this.service.getHero(id).then(
       hero=>{
         this.detailhero=hero;
         console.log(this.detailhero);
        }
   ).catch((error: any) => Promise.reject(error || 'client error'))
  }

方法都类似，只是你需要传入想查询的id;

constructor中运行此方法，比如我想知道第二个英雄的详情：

this.getHero(2);

  看看控制台输出：

 

  看看html代码：

 <p *ngIf="detailhero">{{detailhero.name}}</p>

注意：单个对象用*ngIf ；

6. http promise还有什么请求方式？

request(url: string | Request, options?: RequestOptionsArgs): Observable<Response>;
    /**
     * Performs a request with `get` http method.
     */
    get(url: string, options?: RequestOptionsArgs): Observable<Response>;
    /**
     * Performs a request with `post` http method
     */
    post(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>;
    /**
     * Performs a request with `put` http method.
     */
    put(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>;
    /**
     * Performs a request with `delete` http method.
     */
    delete(url: string, options?: RequestOptionsArgs): Observable<Response>;
    /**
     * Performs a request with `patch` http method.
     */
    patch(url: string, body: any, options?: RequestOptionsArgs): Observable<Response>;
    /**
     * Performs a request with `head` http method.
     */
    head(url: string, options?: RequestOptionsArgs): Observable<Response>;
    /**
     * Performs a request with `options` http method.
     */
    options(url: string, options?: RequestOptionsArgs): Observable<Response>;

 6.1 我们来添加一个英雄；

   hero.service.ts中加入这一段：

/*注释1*/ private headers = new Headers({'Content-Type': 'application/json'});
      addHero(name:string):Promise<Hero>{
          return this.http.post(this.heroUrl,JSON.stringify({name:name}),{headers:this.headers})
          .toPromise()
          .then(
              res=>
                  res.json().data as Hero
          )
          .catch((error: any) => Promise.reject(error || 'Server error'));
      }

注释1：

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

需要引入Headers，然后new 一个实例；

但是这个参数是可选的；

组件中怎么接收：

addhero:Hero;
  addHero(name:string){
    this.service.addHero(name).then(
        hero=>{
          this.addhero=hero;
          console.log(this.addhero);
          this.hero.push(this.addhero);  /*将添加的数据Push进hero数组*/
        }
    ).catch((error: any) => Promise.reject(error || 'client error'))
  }

一样的代码，就不过多解释；

我们的英雄在哪里添加呢？

  肯定是要有一个input输入框的：

 <div>
     add:<input #heroName/>
     <button (click)="addHero(heroName.value);heroName.value=''">add</button>
 </div>

添加之后，可以看到控制台会有输出：

 

但是界面显示的还是这些：

 

Angular会自动检测数据的变换，当有数据变换时，会实时更新

还有一些其他方法，自己去尝试下；

hero.service.ts:

import { Injectable } from '@angular/core';
import { Http, Headers,Response} from '@angular/http';
import 'rxjs/add/operator/toPromise';
import { Hero } from './hero';
@Injectable()
export class HeroService {
    constructor(private http: Http) { }
    private heroUrl = 'api/heroes';
    getHeroes(): Promise<Hero[]> {
        return this.http.get(this.heroUrl)
            .toPromise()
            .then( this.extractData )  /*注释1*/
            .catch((error: any) => Promise.reject(error || 'Server error'));/*注释2*/
    }

    getHero(id: number): Promise<Hero> {
        const url = `${this.heroUrl}/${id}`;
        return this.http.get(url)
            .toPromise()
            .then(this.extractData)
            .catch(this.handleError);
    }
    private headers = new Headers({ 'Content-Type': 'application/json' });
    addHero(name: string): Promise<Hero> {
        return this.http.post(this.heroUrl, JSON.stringify({ name: name }), { headers: this.headers })
            .toPromise()
            .then(this.extractData)
            .catch(this.handleError);
    }

   /**
    *
    * @param res 接收数据的方法
    */
    private extractData(res: Response)  {  /*注释2*/
        let body = res.json();
        return body.data|| {}; /*注释3*/
    }

    /**
     * 
     * @param error 处理错误的方法
     */
    private handleError(error: Response | any) {
        return Promise.reject(error || 'Server error');
    }
}

注释1：将then()和catch()里面的部分提取出来，每次使用只需要调用方法即可；
注释2：接收的Response记得将Response在Http对象中引入；
注释3：这里接收的data其实是一个any型；

7. Observable对象

 Http服务中的每个方法都返回一个 HTTP Response对象的Observable实例；

Observable 就是一个拥有以下特性的函数：

• 它接收一个 observer 对象作为参数，该对象中包含 next、error 和 complete 方法
• 它返回一个函数，用于在销毁 Observable 时，执行清理操作

在 RxJS 中，返回的是 Subcription 对象，该对象中包含一个 unsubscribe 方法。

一个 Observable 对象设置观察者 (observer)，并将它与生产者关联起来。该生产者可能是 DOM 元素产生的 click 或 input 事件，也可能是更复杂的事件，如 HTTP。

当 Observable 对象产生新值的时候，我们可以通过调用 next() 方法来通知对应的观察者。若出现异常，则会调用观察者的 error() 方法。当我们订阅 Observable 对象后，只要有新的值，都会通知对应的观察者。但在以下两种情况下，新的值不会再通知对应的观察者：

• 已调用 observer 对象的 complete() 方法
• 消费者对数据不再感兴趣，执行取消订阅操作

此外在执行最终的 subscribe() 订阅操作前，我们传递的值可以经过一系列的链式处理操作。执行对应操作的东西叫操作符，每个操作符执行完后会返回一个新的 Observable 对象，然后继续我们的处理流程。

那么我们可以直接返回Observable给组件吗？

我们可以看看，之前getHero()那一段如果直接改成返回Observable对象会如何；

getHeroes():Observable<Hero[]>{  /*注释1*/
        return this.http.get(this.heroUrl)
        .map(this.extractData); 
    }

注释1：不用调用toPromise()方法，自然也不用then()去取数据，而是直接返回Observable对象之后

调用RXJS中的map操作符来从返回的数据中提取数据；

所以你要引入：

import { Observable }  from 'rxjs/Observable';
import 'rxjs/add/operator/map';

操作符之后会讲到，注意和之前的promise方法对比；

组件中怎么接收数据Observable对象呢？

 getHeroes(){
    this.service.getHeroes().subscribe(    /*注释1*/
      hero=>{
        this.hero=hero;
        console.log(this.hero);
      }
    )
  }

这样显示的效果也是一样的；

注释1：调用 subscribe() 方法，来获取最终的值，采取订阅的方式，而不是用then();

8. Observabel和Promise 有什么不同

   8.1 两个都可以用于web API http的调用，但Observable是可以中途取消的，而Promise一旦触发就不能被取消；

 setTimeout(() => {
        this.service.getHero().unsubscribe();
      }, 1000);

   8.2  因为Promise只能发起一次请求，只要接收到数据，就会算完成，所以Promise只能发射一个值就算结束，Observable可以连续发送好几个值，在服务器对第一个请求作出回应之前，再开始另一个不同的请求；

this.heroes = this.searchTerms
    .debounceTime(300)        
    .distinctUntilChanged()  
    .switchMap(term => term   
      ? this.service.search(term)
      : Observable.of<Hero[]>([]))
    .catch(error => {
      console.log(error);
      return Observable.of<Hero[]>([]);
    });
this.heroes.subscribe(value => console.log(value));

这个后面代码操作符这块有详解；

 8.3 Observable提供了很多的工具函数，最最最常用的filter和map；详细看看这两个map和filter；

 map() 操作符返回一个新的 Observable 对象
 filter() 操作符执行过滤操作，然后又返回一个新的 Observable 对象

最后我们通过调用 subscribe() 方法，来获取最终的值

Filter:过滤器

getHeroes(){
    this.service.getHeroes().filter(hero => hero.length >= 2)
    .subscribe(
        hero=>{
           this.hero=hero;
        }
    )
  }

Map的用法上面有介绍；

但是，使用承诺的方式能让调用方法更容易写，并且承诺已经在 JavaScript 程序员中被广泛接受了。

  再来看看Observable操作符：

   根据名字搜索用户：

search(term: string): Observable<Hero[]> {
        return this.http
               .get(`api/heroes/?name=${term}`)
               .map(response => response.json().data as Hero[]);
    }

 看看组件代码：

 import { Observable } from 'rxjs/Observable';  /*注释1*/
import { Subject }  from 'rxjs/Subject';  /*注释2*/
// Observable class extensions
import 'rxjs/add/observable/of';  /*注释3*/
// Observable operators
import 'rxjs/add/operator/catch';  /*注释4*/
import 'rxjs/add/operator/debounceTime';  /*注释5*/
import 'rxjs/add/operator/distinctUntilChanged';  /*注释6*/
import 'rxjs/add/operator/switchMap'; /*注释6*/

引入这些操作符：

注释1：引入RXJS的可观察对象；
注释2：Suject是一个可观察事件流中的生产者，通过调用Next()对象，可以将新观察的对象放入可观察流中；
注释3：是Rxjs为Observable对象提供的扩展，
注释4：异常操作符，拦截失败的可观察对象。
注释5：相当于settimeout(),延迟；
注释6：distinctUntilChanged确保只在过滤条件变化时才发送请求， 这样就不会重复请求同一个搜索词了；
注释7：switchMap()会为每个从debounce和distinctUntilChanged中通过的搜索词调用搜索服务。 它会取消并丢弃以前的搜索可观察对象，只保留最近的；使用这个每触发一次事件都会引起一次Http()的调用，即使你使用延迟，但同一时间还是会有多个Http请求，并且返回的顺序不一定是请求发起的顺序；

 看看Http()方法调用：

 heroes: Observable<Hero[]>;
  private searchTerms=new Subject<string>();   // searchTerms生成一个产生字符串的Observable
  /*每当调用search()时都会调用next()来把新的字符串放进该主题的可观察流中*/
  search(term:string):void{
    this.searchTerms.next(term);
  }
   ngOnInit(): void {
     this.heroes = this.searchTerms
    .debounceTime(300)        
    .distinctUntilChanged()  
    .switchMap(term => term   
      ? this.service.search(term)
      : Observable.of<Hero[]>([]))
    .catch(error => {
      console.log(error);
      return Observable.of<Hero[]>([]);
    });
}

看看代码：

 <div>
  search :<input #searchBox (keyup)="search(searchBox.value)"/>
     <div  *ngFor="let b of heroes | async">
        {{b.name}}
    </div>
</div>

为什么使用一个async管道呢？因为得到的是Observable对象，不是数组，*ngFor不能遍历可观察对象；

效果：

 

看完这个，大概知道：

  Observable（可观察对象）是基于推送（Push）运行时执行（lazy）的多值集合；

关于操作符，我有话要说：

   大部分RxJS操作符都不包括在Angular的Observable基本实现中，基本实现只包括Angular本身所需的功能，也就是，你需要的大多操作符都需要从rxjs中引入；

 

9. 上述的例子，其实说的都是关于web api,内存服务器的，占用内存的东西，速率都有点慢，如果你要从本地获取文件记住不要用这个；

可以换用json文件获取：

 heroes.json：
{
  "data": [
    { "id": 1, "name": "Windstorm" },
    { "id": 2, "name": "Bombasto" },
    { "id": 3, "name": "Magneta" },
    { "id": 4, "name": "Tornado" }
  ]

 创建一个heroes.json，记得放在assets文件下： 
{
  "data": [
    { "id": 1, "name": "Windstorm" },
    { "id": 2, "name": "Bombasto" },
    { "id": 3, "name": "Magneta" },
    { "id": 4, "name": "Tornado" }
  ]
}

我们app.module.ts里面的：

   InMemoryWebApiModule.forRoot(InMemoryDataService),

不用引入，引入之后会默认使用web api；

然后hero.service.ts中这样

private heroesUrl = 'assets/heroes.json';

其他的都是一样的；

这种方式对于请求静态的本地数据是比较有用的；如果是请求真是的远程服务器地址，url换成远程地址就可以；