在 ionic 2 应用程序中使用 promise with observable

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;
}

现在的问题是，在将授权附加到 header 之前，流程将转到下一行并且 Web api 出现错误。无论如何，我是否可以以这样一种方式进行同步，即在附加授权之后，应该只发生服务调用。我尝试将网络 api 调用放在 then 块中，但它使服务调用成为一种承诺。任何帮助将不胜感激。

Answer 1

您需要访问 storage.get 中的 api 。这确保在您进行 api 调用时值可用。然后将 api 调用转换为 Observable 以承诺 toPromise()。现在您可以通过 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 观察者将是这样的-

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();
})

在 ionic 2 应用程序中使用 promise with observable

Using promise with observable in ionic 2 applications

ionic-framework

ionic2

angular2-http

angular