Question

我想知道将来自get请求的http响应映射到类而不是基本Javascript对象的最佳方法是什么。

在我目前的尝试中，我简单地做new ClassName(data)，但可能有一个模糊的Angular指定和完全令人敬畏的方式，我不知道。

这是我目前的代码：

getPost(id:number){
    return this._http.get(this._postsUrl+'/'+id)
                .map(res => new Post(res.json().data))
                .do(data => console.log(data))
                .catch(this.handleError);
}

我需要Post成为一个类，而不仅仅是一个接口，因为我有内部方法。

我按照他们的getHeroes方法跟随HeroTutorial和http“开发者指南”：

getHeroes () {
return this.http.get(this._heroesUrl)
                .map(res => <Hero[]> res.json().data)
                .catch(this.handleError);
}

我以某种方式期望<Hero[]>部分做到这一点：拿Hero类并创建它的新实例，但我的测试显示它没有，这几乎只是Typescript知道该怎么做期望的。

有什么想法吗？谢谢！

Answer 1

我认为您可以使用JavaScript对象的map方法：

getHeroes () {
  return this.http.get(this._heroesUrl)
            .map(res => {
               return res.json().data.map((elt) => {
                 // Use elt to create an instance of Hero
                 return new Hero(...);
               });
             })
            .catch(this.handleError);
}

Answer 2

通过在返回的对象上设置原型，我能够得到我班级的实例。

getHero () {
      return this.http.get(this._heroUrl)
            .map(response => {
                    let res = <Hero> response.json();
                    Object.setPrototypeOf(res, Hero.prototype);
                    return res;
                   })
            .catch(this.handleError);
}

我的课程非常简单，使用无参数构造函数，所以这对我有用。对于更复杂的类，我不知道这是否有效。

注意：上面的代码适用于getHero（）而不是getHeroes（）。我假设我可以通过在数组中的每个项目上设置原型来对列表执行相同的操作但我没有尝试/确认过。

参考：我从BMiner的this post得到了这个想法

Answer 3

良好做法是使用

从GET响应中使用数据

Observable<Model>

（关于Angular文档https://angular.io/guide/http）所以...

//进口

import {HttpClient} from "@angular/common/http";

//在构造函数参数列表中

private http: HttpClient

//服务方法

getHeroes(): Observable<Hero[]> {return this.http.get<Hero[]>({url}, {options});}

您无需再做任何其他事情。我认为这种方法最友好。

Angular 2映射http响应类

3 个答案: