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

标签 angular ionic-framework ionic2 angular2-http

我试图在 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 会出错。 无论如何,我是否可以以这样一种方式进行同步,即在附加授权之后,应该只发生服务调用。 我尝试将 web api 调用放在 then block 中,但它使服务调用成为一种 promise 。 任何帮助将不胜感激。

最佳答案

您需要访问 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
})

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

关于angular - 在 ionic 2 应用程序中使用 promise with observable,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41362624/

相关文章:

angular - 需要 Highcharts 中的图例为方形

cordova - 如何在 Capacitor 的应用内浏览器中打开所有链接?

javascript - VS Code 强制使用分号,但 Angular TypeScript 示例的使用不一致?

html - CSS - float 不能正常工作

javascript - Angular2 - 登录后重定向

javascript - 使用 Ionic/AngularJS 和 Cordova 为 native 和 Web 应用程序使用相机

angularjs - 如何隐藏或禁用按钮?

angular - 在单个页面中更改 ionic 标签的字体大小 - Ionic

firebase - 使用 Ionic 2 推送通知

angular - 在 *ngFor 中使用带可变参数的 Slice Pipe