Angular2中的异步调用

Question

我将这2个函数称为this.fetchTables（）; this.fetchAllTables（）; 在Angular中d​​emo.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);
                }
              });
          }

Answer 1

您不会在两个可观察对象之内订阅，而是使用RxJS组合两个可观察对象。 有两种方法可以将它们组合在一起：一种方法是CombineLatest，如果每个子对象都发出一次，然后在子对象上再次发出，则该元素会发出。 这是所有合并运算符的文档： https : //www.learnrxjs.io/operators/combination/

要在某个可观察对象发出时执行某项操作，如果您不想在合并的可观察对象的一个​​订阅中进行订阅中的所有操作，则可以使用tap运算符

Answer 2

我认为这两个可观察对象的订阅都存在一些错误（由于此处共享了部分文件，我无法确定）。 因此，无论何时一个请求完成，它的订阅都会被执行，这会引发错误，从而阻止第二个订阅运行。

我可能是错的，但需要您提供有关错误的更多详细信息以进行确认。 另外，如@Erbsenkoenig所述，如果您打算一起进行两次调用，则建议您使用concatMap或mergeMap或类似的东西。