强制 Observable 等待回调函数被调用答案

【问题标题】：Forcing Observable Waiting till the Callback Funtion to be Invoked强制 Observable 等待回调函数被调用
【发布时间】：2017-10-25 20:25:37
【问题描述】：

我想要实现的目标是，每当我收到状态代码 401 Unauthorized 时，抛出一个对话框并在单击“确定”后导航到登录页面。

我会详细解释它，但通常我的问题是，我不能让 observable this.getDialogModalService().displayDialogModal() 等待调用 ModalController "onDidDismiss" 的回调函数。并立即将 undefined 返回给调用者服务 this.http.post()。

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

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

这是一个小的调用栈；

=> 订阅 => getEventList() => this.http.post() => this.getDialogModalService().displayDialogModal()强> => 回调 => 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 我在这里调用this.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;
}

【问题讨论】：

标签： angular ionic-framework rxjs

【解决方案1】：

我承认我看不到全貌，但有一点需要注意 - 如果您使用的是 Angular 4.3.4 和 HttpInterceptor 接口，那么您在 EventService.ts 中的 http.post 可能应该是 @987654323 @。

希望这会有所帮助。

【讨论】：