Angular2中的异步调用答案

【问题标题】：Async call in Angular2Angular2中的异步调用
【发布时间】：2018-12-21 07:33:28
【问题描述】：

我正在调用这 2 个函数 this.fetchTables(); this.fetchAllTables();在 Angular 中 demo.ts 文件的构造函数中。

两者都是获取 api 调用。在这两个电话中，每次都有 1 个电话失败。有时我会得到 fetchTables 的结果。有时我会得到 fetchallTables 的结果。

      constructor(private api:BackendApiService, private spinner: NgxSpinnerService, private utills:CommonUtillsService, private router: Router) {
            // reload or refresh page on active click
            this.router.routeReuseStrategy.shouldReuseRoute = function() { return false; }; 
this.fetchTables();
    this.fetchAllTables();

           }

           fetchTables() {
            this.api.getTableAccess().subscribe(data => {
              this.spinner.hide();
              console.log('Data to get tables', data);
              if(data) {
                this.data = data.body.entities;
                this.showNoTableRecordList = false;
              }
            },
            (err: HttpErrorResponse) => {
              if (err.status == 401) {
                window.location.href = Constants.GANDALF_HOST;
              }
              this.spinner.hide();
              if (err.error instanceof Error) {
                //A client-side or network error occurred.
                toast(Constants.TOAST_PREFIX+Constants.SOMETHING_WRONG, Constants.TOAST_DURATION);
              } else {
                //Backend returns unsuccessful response codes such as 404, 500 etc.
                toast(Constants.TOAST_PREFIX+Constants.SOMETHING_WRONG, Constants.TOAST_DURATION);
              }
            });
           }

          fetchAllTables() {
            this.api.getAllTable().subscribe(data => {
                this.spinner.hide();
                if(data) {
                  this.allTables = data.body;
                  this.showNoTableRecordList = false;
                } else {
                  this.showNoTableRecordList = true;
                }
              },
              (err: HttpErrorResponse) => {
                if (err.status == 401) {
                  window.location.href = Constants.GANDALF_HOST;
                }
                this.spinner.hide();
                if (err.error instanceof Error) {
                  //A client-side or network error occurred.
                  toast(Constants.TOAST_PREFIX+Constants.SOMETHING_WRONG, Constants.TOAST_DURATION);
                } else {
                  //Backend returns unsuccessful response codes such as 404, 500 etc.
                  toast(Constants.TOAST_PREFIX+Constants.SOMETHING_WRONG, Constants.TOAST_DURATION);
                }
              });
          }

【问题讨论】：

您能否分享有关失败的更多信息...这两个函数的错误对象返回什么？

标签： angular angular2-routing angular2-services

【解决方案1】：

我假设订阅这两个 observables 有一些错误（由于部分文件在此处共享，我无法识别）。因此，每当其中一个请求完成时，它的订阅就会被执行，这会引发错误并因此阻止第二个订阅运行。

我可能错了，但我需要有关您的错误的更多详细信息来确认。另外，正如@Erbsenkoenig 所提到的，如果您打算同时进行两次通话，我建议您使用 concatMap 或 mergeMap 或类似的东西。

【讨论】：

【解决方案2】：

你不会在两个 observables 中订阅，而是使用 RxJS 组合两个 observables。有几种方法可以将它们组合起来：一种是 combineLatest，如果每个孩子发出一次，然后在孩子上再次发出一次，它就会发出。以下是所有组合运算符的文档：https://www.learnrxjs.io/operators/combination/

要在一个 observable 发射时执行某些操作，如果您不想在合并后的 observable 的单个订阅中执行订阅中的所有操作，则可以使用 tap 运算符

【讨论】：