看到官方教程中HTTP小节之前还在向同事夸angularjs的教程做的厚道,没有什么坑。结果到http就出现了,发现了两处错误,度娘各种搜索没有发现相关的帖子,于是记录下来,希望能被高效收录,以解广大IT民工之困扰。
getHero(id: number): Promise<Hero> {
const url = `${this.heroesUrl}/${id}`; //错误1
return this.http.get(url)
.toPromise()
.then(response => response.json().data as Hero) //错误2
.catch(this.handleError);
}
错误1:
这一行代码改成正常的拼接字符串即可。比如:
错误2:
var url = this.heroesUrl+"/"+hero.id;
个人猜测:
原本代码的本意貌似是要实现参数的自动替换,但实际上并没有完成替换,http.get方法的源码中也没有找相能够进行参数,上面方法中更是没有替换相关的代码。
要么是我对angular的内核了解太浅,要么是教程中犯了个低级错误,如有高手知晓个中原由,望指正。
错误2:
实际上response返回的是封装后的response对象,其中有body属性就是返回结果,经过json()方法后本身就已经是Hero的json对象了,不需要再使用data属性。
因此上面一行应改为:
.then(response => response.json() as Hero)
这个问题在官方的在线示例中同样存在。
这个错误在HTTP小节中应该出现有2-3次,修改方法类似
个人猜测错误产生原因:这个示例可能是angular2版本适用的代码,angular4中InMemory那个service的协议可能有所调整,而教程没有更新。