在Angular2 / Ionic中的提供者中使用observable在页面上创建http.get

时间:2017-02-23 19:07:25

标签: angular ionic2 observable

我在使用promises / observables迁移我的Ionic应用程序(Angular> Angular2)时遇到了一些麻烦。

这是我在 CartPage 上的方法:

list() {

    this.storage.get('token')
    .then((token) => {

        var authHeader = new Headers();
        authHeader.append('Authorization', 'Bearer ' + JSON.stringify(token).replace(/['"]+/g, ''));

        this.http.get(this.global.getApiUrl()+'cart/list', {
            headers: authHeader
        })
        .map(res => res.json())
        .subscribe(
            data => {
                this.data = data.data;
                return this.data;
            },
            err => {
                console.log(err);
            }
        );

    });

}

购物车提供商

{{1}}

但我明白了:

打字稿错误 'void'类型中不存在属性'subscribe'。

所以我进行了搜索和搜索,但在文档或示例/教程中找不到像这样有效的可观察对象。

我不知道我是否遗漏了以某种方式声明类型或者我不使用订阅并使用某种不同的方法。

谢谢!

1 个答案:

答案 0 :(得分:0)

购物车页面:

   this.cartService.list(token).subscribe(
      data => {
         console.log(data);
         this.cartData = data.cart;
      err => {
         console.log(err);
      });

购物车提供商:

   list(token) {
      var authHeader = new Headers();
      authHeader.append('Authorization', 'Bearer ' + JSON.stringify(token).replace(/['"]+/g, ''));

      return this.http.get(this.global.getApiUrl()+'cart/list', {
          headers: authHeader
      })
      .map(res => res.json());

   }

这是竞争条件,这里的主要问题是 http请求需要令牌,但您必须从Storage获取该信息该操作是异步

找到一种在列表调用之前获取令牌的方法。 最简单的方法是让提供程序保存该数据并将其用作离子Storage提供程序的代理,因此当提供程序启动时,运行类似init()的内容并获取所需的基本数据您的应用,例如令牌和其他内容,然后您只需在CartProvider上注入该提供商并致电myDataProvider.token