无法使用离子2中的一个订阅功能订阅数据

时间:2017-06-06 07:06:40

标签: angular typescript ionic2

这是我的获取方法。

    get(url: string, options?: RequestOptionsArgs): Promise<Observable<{}>> {
    return new Promise((resolve, reject) => {
      this._frotzOptions(url, options).then((data) => {
        if (data) {
          resolve(this.http.get(url, data));
        } else
          resolve(false);
      }).catch((err) => {
        reject(err);
      });
    });
  }

_frotzOptions方法。

     private _frotzOptions(urlo: string | Request, options: RequestOptionsArgs): Promise<{}> {
    if (!options) {
      options = {}
    }
    if (!options.headers) {
      options.headers = new Headers();
    }
    return new Promise((resolve, reject) => {
      this.storage.get('token').then(token => {
        options.headers.append('Content-Type', 'application/json');
        options.headers.append('Authorization', 'Bearer ' + token);
        if (token) {
          resolve(options);
        }
        else
          resolve(false);
      }).catch((err) => {
        reject(err);
      });
    });

  }

home.ts

var subscription = Observable.fromPromise(this.ahttp.get(url));
subscription.subscribe((data) => {
  data.subscribe(rsp => {
    console.log("rsp", rsp);
  })
}, (err) => {
  console.log(err)
});

当我需要使用从get方法解析的数据时,我必须在订阅中使用订阅!使用订阅的最佳方法是什么!有什么建议!谢谢!

2 个答案:

答案 0 :(得分:0)

你好,为什么不这样做:

private _frotzOptions(urlo: string | Request, options: RequestOptionsArgs): Observable<any> { //<--!! CHANGE TO OBSERVABLE from Rx/rx
if (!options) {
  options = {}
}
if (!options.headers) {
  options.headers = new Headers();
}
return new Promise((resolve, reject) => {
  this.storage.get('token').then(token => {
    options.headers.append('Content-Type', 'application/json');
    options.headers.append('Authorization', 'Bearer ' + token);
    if (token) {
      resolve(options);
    }
    else
      resolve(false);
  }).catch((err) => {
    reject(err);
  });
});

然后当你想要使用它时:

this.ahttp.get(url).subscribe((data) => {
  data.subscribe(rsp => {
    console.log("rsp", rsp);
  })
}, (err) => {
  console.log(err)
});

最后......在请求中使用INTERCEPTOR注入您的Bearer令牌......可能包含以下插件:

https://www.npmjs.com/package/angular2-http-interceptor

答案 1 :(得分:0)

在另一个promise / observable上使用新的promise构造函数是antipattern。 转换你的observable并返回它。

您的get功能可以简化为:

 get(url: string, options?: RequestOptionsArgs): Promise<{}> {
    return this._frotzOptions(url, options).then((data) => {
        if (data) {
          return this.http.get(url, data).toPromise(); //use Observable toPromise function
        } else
          return false;
    }).catch((err) => {
         console.log(err); // handle error
   });
  }

您的_frotzOptions功能:

  private _frotzOptions(urlo: string | Request, options: RequestOptionsArgs): Promise<{}> {
    if (!options) {
      options = {}
    }
    if (!options.headers) {
      options.headers = new Headers();
    }
    return this.storage.get('token').then(token => {
        options.headers.append('Content-Type', 'application/json');
        options.headers.append('Authorization', 'Bearer ' + token);
        if (token) {
          return options;
        }
        else
          return false;
    });
  }

这称为promise chaining