在 ionic 2 应用程序中使用带有 observable 的 promise

Question

我试图在 ionic 2 应用程序中调用 Web 服务，但在 promise 和 observable 之间陷入了困境。 这是我在单击按钮时调用的函数-

getUserDetailsIfAccessTokenIsSuccess()


{
    this.remedyService.userGetDetail(this.loginDetailsObj.username).subscribe(
      data =>{
        console.log("userGetDetail Success="+JSON.stringify(data));
      },
      err =>{
        console.log("userGetDetail Success="+JSON.stringify(error));
        },
       () =>{
              console.log("Get Userdetails Completed");
      });
}

现在我在我的服务文件中调用 userGetDetail 函数。

userGetDetail(eid){
    var url = '/userGetDetail';
    var params = {
                'EID':eid
            };
    console.log(JSON.stringify(params));
    var headers = new Headers();
    this.createAuthorizationHeader(headers);
    this.storage.get('remedyAccessToken').then((value)=>{
        var token  = value.toString();
        console.log("TOKEN IN REMEDYSERVICES="+token);
        headers.append('Authorization', token);
        console.log("header value inside="+JSON.stringify(headers));
    })
    console.log("header value outside="+JSON.stringify(headers));
    let options = new RequestOptions({ headers: headers });
    this.response = this.http.post(url,this.urlEncode(params),options).map(res => res.json());
    console.log("Response JSON="+JSON.stringify(this.response));
    return this.response;
}

现在的问题是，在将授权附加​​到标题之前，流程将转到下一行，并且 web api 给出了错误。 无论如何，我可以以这样的方式进行同步，即在附加授权之后，只会发生服务调用。 我尝试将 web api 调用放入 then 块中，但它将服务调用作为一个承诺。 任何帮助将不胜感激。

Answer 1

您需要访问 storage.get 内的 api 。这确保在您进行 api 调用时值可用。然后将api 调用（即Observable）转换为toPromise() 的promise。现在您可以以 Promise 的身份访问响应。这是您的代码中的大致工作流程。

this.storage.get('remedyAccessToken').then((value)=>{
    var token  = value.toString();
    console.log("TOKEN IN REMEDYSERVICES="+token);
    headers.append('Authorization', token);
    console.log("header value inside="+JSON.stringify(headers));
    console.log("header value outside="+JSON.stringify(headers));
   let options = new RequestOptions({ headers: headers });
   this.response = this.http.post(url,this.urlEncode(params),options).map(res => res.json());
   console.log("Response JSON="+JSON.stringify(this.response));
   return this.response.toPromise();
})



this.remedyService.userGetDetail(this.loginDetailsObj.username).then(fn).catch(fn);

或者，如果您希望输出为 Observable，请遵循此方法。

Observable.fromPromise(this.storage.get('remedyAccessToken')).flatMap((value)=>{
        var token  = value.toString();
        console.log("TOKEN IN REMEDYSERVICES="+token);
        headers.append('Authorization', token);
        console.log("header value inside="+JSON.stringify(headers));
        console.log("header value outside="+JSON.stringify(headers));
       let options = new RequestOptions({ headers: headers });
       this.response = this.http.post(url,this.urlEncode(params),options).map(res => res.json());
       console.log("Response JSON="+JSON.stringify(this.response));
       return this.response
})

这种方法可以达到你想要的结果。

Answer 2

在 Promise 中调用观察者并返回观察者的正确方法是这样的-

return Observable.fromPromise(this.storage.get('remedyAccessToken')).then((value)=>{
    var token  = value.toString();
    console.log("TOKEN IN REMEDYSERVICES="+token);
    headers.append('Authorization', token);
    console.log("header value inside="+JSON.stringify(headers));
    console.log("header value outside="+JSON.stringify(headers));
   let options = new RequestOptions({ headers: headers });
   this.response = this.http.post(url,this.urlEncode(params),options).map(res => res.json());
   console.log("Response JSON="+JSON.stringify(this.response));
   return this.response.toPromise();
})