（终极篇章 一）实战中服务器通讯细节（http&webSocke

想的和做的，差多了 —— 马丁路德.东

我们要在服务中使用HTTP服务并且还要异步的调用他的数据 怎么办?
1.首先我们要在自定义服务的构造函数中注入http服务

image.png

2.同样要异步操作就要引入

import 'rxjs/Rx'

3.公共服务上改造获取商品信息的方法,使他们可以接受异步的流。

getProducts(): Observable<Product[]> {
    return this.http.get('/api/products').map(res => res.json());
  }
  getProduct(id: number): Observable<Product>{
    return this.http.get('/api/product/' + id).map(res => res.json());
  }
  getCommentsForProductId(id: number): Observable<Comment[]>{
    return this.http.get('/api/product/' + id + '/comments').map(res => res.json());
  }

4.服务器上也有他们相应的方法
在这之前服务器已经有了一堆数据

export class Product {
    constructor(
        public  id:number,
        public  title:string,
        public  price:number,
        public rating:number,
        public desc:string,
        public categories:Array<string>){

    }
};
export class Comment {
    constructor(
        public id:number,
        public  productId:number,
        public  timestamp:string,
        public  user:string,
        public  rating: number,
        public  content :string
    ){

    }
};
const products: Product[] = [
    new Product(1,"第一个商品",1.99,3.5,"这是第一个商品，是我在学习慕课网angular时创建的",["电子产品","比特币"]),
    new Product(2,"第二个商品",5.99,3.5,"这是第二个商品，是我在学习慕课网angular时创建的",["电子产品","比特币"]),
    new Product(3,"第三个商品",2.99,4.5,"这是第三个商品，是我在学习慕课网angular时创建的",["电子产品"]),
    new Product(4,"第四个商品",1.99,3.5,"这是第四个商品，是我在学习慕课网angular时创建的",["电子产品","比特币"]),
    new Product(5,"第五个商品",6.99,1.5,"这是第五个商品，是我在学习慕课网angular时创建的",["电子产品","比特币"]),
    new Product(6,"第六个商品",6.99,5,"这是第五个商品，是我在学习慕课网angular时创建的",["电子产品","比特币"]),
];
const comments:Comment[] = [
    new Comment(1,1,"2017-02-02 20:20:22","老张0",1,"讲的还行1号"),
    new Comment(2,1,"2017-02-02 21:22:22","老张1",1,"讲的还行1号"),
    new Comment(2,1,"2017-02-02 21:22:22","老张1",1,"讲的还行1号"),
    new Comment(3,1,"2017-02-02 22:22:22","老张2",1,"讲的还行1号"),
    new Comment(4,2,"2017-02-02 23:22:22","老张3",1,"讲的还行2号"),
    new Comment(5,3,"2017-02-02 24:22:22","老张4",1,"讲的还行3号"),
    new Comment(5,6,"2017-02-02 24:22:22","老张4",1,"讲的还行6号"),
    new Comment(5,4,"2017-02-02 24:22:22","老张4",1,"难死了4号"),
    new Comment(5,5,"2017-02-02 24:22:22","老张4",1,"讲的还行5号"),
    new Comment(5,6,"2017-02-02 24:22:22","老张4",1,"讲的还行6号"),
];

服务器方法

app.get('/api/products',(req,res)=>{
  res.json(products);
});

app.get('/api/product/:id',(req,res)=>{
    res.json(products.find((product) => product.id == req.params.id));
    console.log("服务器已经接受到了商品详情请求");
});
app.get('/api/product/:id/comments',(req,res)=>{
    console.log("服务器已经接受到了商品评论列表请求");
    res.json(comments.filter((comment: Comment) => comment.productId == req.params.id));
});

5.1组件上面的控制器（通过注入依赖将服务引入）的改变,直接更改数据类型，然后async异步管道绑定

  private products: Observable<Product[]>;

在ngOnInit中承接数据

 this.products = this.productService.getProducts();

<div class="col-md-4 col-sm-4 col-lg-4" *ngFor="let product of products | async">
  <div class="thumbnail">
    <div class="caption">
      <h4 class="pull-right">{{product.price}}元</h4>
      <h4><a [routerLink]="['/product',product.id]">{{product.title}}</a></h4>
      <p>{{product.desc}}</p>
    </div>
    <div>
      <app-stars [rating]="product.rating"></app-stars>
    </div>
  </div>
</div>

5.2手工订阅方法（在组件中注入依赖之后直接订阅，不用第三个变量承接）

 this.productService.getProduct(productId).subscribe(
      product => {
        this.product = product;
        this.currentBid = product.price;
      }
    );

同时为了防止数据的undefined,在数据后面加上？

<div class="thumbnail">
  ![](https://img.haomeiwen.com/i6331078/b7db1b23d9c58735?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  <div>
    <h4 class="pull-right">
      {{product?.price}}元
    </h4>
    <h4>
      {{product?.title}}
    </h4>
    <p>{{product?.desc}}</p>
  </div>
  <div>
    <p class="pull-right">{{comments?.length}}</p>
    <p>
      <app-stars [rating] ="product?.rating" ></app-stars>
    </p>
  </div>
</div>

5.3http请求的重定向
1.根目录下，新建proxy.con.json
代码如下

image.png

2.告诉angular启动时加上配置文件，修改package.json的start参数

image.png

3.更改发送路径

image.png

post（和本教程其他代码不重合）

image.png

只有当数据发生变化是才触发事件,用于用户优化体验

image.png