强制可观察等待直到调用回调函数

时间:2017-10-25 20:25:38

标签: angular ionic-framework rxjs

我想要实现的目标,每当我获得状态代码401 Unauthorized,抛出一个对话框并点击“OK”导航到登录页面后。

我将详细解释它但通常我的问题是,我无法使observable this.getDialogModalService()。displayDialogModal()等待调用ModalController“onDidDismiss”的回调函数。并立即将undefined返回给调用者服务this.http.post()。

有没有办法让observable等到调用回调? 或者整个结构可能不必要地嵌套,应该更改。

我不想提供更多信息并使事情复杂化,但如果需要,我可以为不清楚的部分提供更多信息。

这是一个小调用堆栈;

=> subscribed => getEventList() => this.http.post() => this.getDialogModalService()。displayDialogModal() => callback =>的 dialogModal.onDidDismiss()

Event.Component.ts

    public getEventList() {
    return this.eventService.getEventList(this.navParams.data).subscribe((x: Array<HomeEventListViewModel>) => {
        this._eventList.next(x);
    }, error => {
    });
}

EventService.ts 我在这里打电话.http.post

public getEventList(eventType: number): Observable<Array<HomeEventListViewModel>> {
        var model = new EventListType(eventType);
        return this.http.post('/api/Event/EventList', JSON.stringify(model), null).map((res: Response) => {
          if (res) {
            let httpResponse: HttpResponseSuccessModel = res.json();
            return httpResponse.content;
          }              
        }, error => {
            return null;
         }).catch(x => {
             return null;
        });
}

HttpInterceptor.ts

我通过截获的http服务发送http请求并捕获401调用模式服务以显示对话框

post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
    url = this.updateUrl(url);
    return super.post(url, body, this.getRequestOptionArgs(options)).map((res: Response) => {
        return res;
    }, error => {
        this.getDialogModalService().displayDialogModal("UNKNOWN_ERROR_TITLE", "UNKNOWN_ERROR_MESSAGE");            
        return null;
    }).catch(error => {
        let errorResponse: any = JSON.parse(error._body);
        return this.getDialogModalService().displayDialogModal(errorResponse.errorMessage, "ERROR").map(x => {

            return error;            
        });
    });
}

ModalDialog.Service.ts

这是我用于所有显示对话框事件的模态服务。在我看来,问题的开始。 它不会等待回调,直到它被调用但立即返回undefined。

displayDialogModal(infoMessage: string, infoTitle: string = "INFO"): Observable<any> {
    return this.translateService.get(infoTitle).map(title => {
        let messageType: number = infoTitle == "INFO" ? 1 : 2;
        let dialogModal = this.dialogModalPresent(infoMessage, title, messageType);

        return dialogModal.onDidDismiss(data => {
          return data;
        });
    });        
}


// messageType = 1:Info, 2:Error
private dialogModalPresent(infoMessage: string, infoTitle: string, messageType: number): Modal {
  let cssClass: string = messageType == 1 ? "gift-modal gift-modal-info" : "gift-modal gift-modal-error";
  let dialogModal = this.modalCtrl.create(DialogComponent,
    { "infoMessage": infoMessage, "infoTitle": infoTitle, "firstButtonText": "OK"},
    { showBackdrop: true, enableBackdropDismiss: false, cssClass: cssClass });

  dialogModal.present();

  return dialogModal;
}

1 个答案:

答案 0 :(得分:1)

我承认我无法看到完整的图片,但有一点需要注意 - 如果你正在使用Angular 4.3.4和HttpInterceptor界面,那么你的http.post in EventService.ts应该是HttpClient.post

希望这有帮助。