在继续下一行之前，如何等待方法完成的角度

Question

[在组件内部，我试图调用方法（getConfigSettings（）），该方法又从服务中调用另一个方法（该方法返回一个可观察的集合）。

问题出在主要方法（getConfigSettings（））内部，行没有按顺序执行。这意味着，不必等待可观察的调用完成，而是将控件移至下一行，

  localStorage.setItem('displayExpiryWarning', this.isEnabled ? JSON.stringify(false) : JSON.stringify(true));

this.isEnabled属性未设置。

代码示例：

export class ExamComponent implements OnDestroy, AfterViewInit {

    sub_modules: any;
    isEnabled: boolean = true;
    // .....
    // ......

    onStepA(): void {

            this.checkForCoverage();

    }



checkForCoverage(): void {

    this.getConfigSettings(); // This method never gets finished and control move to next line below        


    localStorage.setItem('displayExpiryWarning', this.isEnabled ? JSON.stringify(false) : JSON.stringify(true));

}



getConfigSettings() {
    this.sub_modules = this.ls.getProductModules().subscribe(
        (data) => {
            try {
                const dataXml = data.filter((data) => data.ModuleName == 'LoginModule')[0].XmlConfig;
                if (dataXml) {
                    const config = xmlToJson(dataXml);

                    this.isEnabled =
                        config['configuration'].appSettings.param.filter(
                            (data) => data.name == 'PropAEnabled',
                        )[0].value === 'true';            
                }                   


            } catch (e) {}
        },
        (err) => {},
    );
}  

}

Answer 1

您可以在getConfigSettings()下进行localStorage部分的设置，或者返回一个Observable从getConfigSettings()进行订阅，并随时随地订阅。

[如果您认为来自Observable的数据在以后的getConfigSettings()调用中不会改变那么您可以使用shareReplay以及将Observable设为class属性。

checkForCoverage(): void {
    this.getConfigSettings().subscribe(() => {
        localStorage.setItem('displayExpiryWarning', this.isEnabled ? JSON.stringify(false) : JSON.stringify(true));
    });
}



getConfigSettings() {
    return this.ls.getProductModules().pipe(tap((data) => {
        try {
            const dataXml = data.filter((data) => data.ModuleName == 'LoginModule')[0].XmlConfig;
            if (dataXml) {
                const config = xmlToJson(dataXml);

                this.isEnabled =
                    config['configuration'].appSettings.param.filter(
                        (data) => data.name == 'PropAEnabled',
                    )[0].value === 'true';            
            }                   
        } catch (e) {}
    }));
}

Answer 2

您可以从getConfigSettings()返回一个观测值，并在checkForCoverage()函数中进行订阅。尝试以下操作

checkForCoverage(): void {
  this.getConfigSettings().subscribe(
    response => {
      if (response) {
        localStorage.setItem('displayExpiryWarning', this.isEnabled ? JSON.stringify(false) : JSON.stringify(true));
      } else {
        // handle error
      }
    }
  );
}

getConfigSettings() {
  const result = new Subject<boolean>();

  this.sub_modules = this.ls.getProductModules().subscribe(
    data => {
      try {
        const dataXml = data.filter((data) => data.ModuleName == 'LoginModule')[0].XmlConfig;
        if (dataXml) {
          const config = xmlToJson(dataXml);
          this.isEnabled = config['configuration']
            .appSettings
            .param
            .filter((data) => data.name == 'PropAEnabled')[0]
            .value === 'true';
          result.next(true);      // <-- push `true` here
        }
      } catch (e) {
        result.next(false);       // <-- push `false` here
      }
    },
    err => {
      result.next(false);         // <-- push `false` here
    },
  );

  return result.asObservable();
}