Javascript 如何在订阅中返回可观察的内容？

编辑：有关解决方案，请参见Kurt Hamilton的答案

我正在调用API以返回settings.service.ts中某些设置的值。 在settings.component.ts中，需要返回这些值以填充表单-当API调用尚未完成时，它会显示加载

它与“返回（伪造数据）”一起工作。但是，我不知道如何返回“realData”

我想返回console.log（realData），而不是fakeData

一些帮助会很好，提前谢谢

下面是代码的相关部分

settings.service.ts：

export interface Settings {
  setting1: boolean;
  setting2: string;
}

const fakeData = {
  setting1: true,
  setting2: 'test'
};

@Injectable()
export class SettingsService {
  defaultSettings: DefaultSettings[];

  constructor(private apiService: ApiService) { }

  loadSettings(): Observable<Settings> {
    this.apiService.getDefaultSettings().subscribe( defaultSettings => {
      // defaultSettings is needed for when value1 or value2 is 'null'
      // not implemented yet, but therefore this nested subscription structure
      this.defaultSettings = defaultSettings;

      const value1 = this.apiService.getSpecificSetting('setting1');
      const value2 = this.apiService.getSpecificSetting('setting2');

      forkJoin([value1, value2]).subscribe( result => {
        const realData = {
          setting1: result[0],
          setting2: result[1],
        };

        console.log(realData);
        // return of(settingsFound); not possible here ...
      });
    });

    return of(fakeData);
  }
}

导出接口设置{
设置1：布尔值；
设置2：字符串；
}
常量伪造数据={
场景1：对，
设置2:“测试”
};
@可注射（）
导出类设置服务{
defaultSettings:defaultSettings[]；
构造函数（私有apiService:apiService）{}
loadSettings（）：可观察{
this.apiService.getDefaultSettings（）.subscribe（defaultSettings=>{
//当value1或value2为“null”时，需要使用defaultSettings
//尚未实现，但因此该嵌套订阅结构
this.defaultSettings=defaultSettings；
const value1=this.apiService.getSpecificSetting（'setting1'）；
const value2=this.apiService.getSpecificSetting（'setting2'）；
forkJoin（[value1，value2]）。订阅（结果=>{
常量realData={
设置1:结果[0]，
设置2：结果[1]，
};
console.log（realData）；
//返回（settingsFound）；此处不可能。。。
});
});
归还（伪造数据）；
}
}

settings.component.ts

settings: Observable<Settings>;

ngOnInit() {
  this.settings = this.settingsService.loadSettings().pipe(
    tap(settings => {
      this.settingsForm.patchValue(settings);
    })
  );
}

设置：可观察；
恩戈尼尼特（）{
this.settings=this.settings服务.loadSettings（）.pipe(
轻触（设置=>{
此.settingsForm.patchValue（设置）；
})
);
}

使用

concatMap

或

switchMap

在另一个可观察对象之后运行一个新的可观察对象（在您的例子中是

forkJoin

）

@Injectable（）
导出类设置服务{
defaultSettings:defaultSettings[]；
构造函数（私有apiService:apiService）{}
loadSettings（）：可观察{
返回此.apiService.getDefaultSettings（）管道(
//保存默认设置
//如果您只需要forkJoin的默认设置，则可能不需要此选项
轻触（defaultSettings=>this.defaultSettings=defaultSettings），
//现在运行下一个可观察的
concatMap（默认设置=>{
返回叉连接({
setting1:this.apiService.getSpecificSetting（'setting1'），
setting2:this.apiService.getSpecificSetting（'setting2'）
});
}),
//现在将forkJoin的结果映射到要返回的值
//在这种情况下不需要地图，
//因为进入forkJoin的参数与所需的返回结构匹配
//为了完整起见，我留了下来
映射（结果=>{
常量realData={
设置1:result.setting1，
设置2:result.setting2，
};
console.log（realData）；
返回真实数据；
})
);
}
}

浓缩版

如果没有注释和冗余调用，完成的结果如下所示：

@Injectable（）
导出类设置服务{
构造函数（私有apiService:apiService）{}
loadSettings（）：可观察{
返回此.apiService.getDefaultSettings（）管道(
concatMap（defaultSettings=>forkJoin({
setting1:this.apiService.getSpecificSetting（'setting1'），
setting2:this.apiService.getSpecificSetting（'setting2'）
}))
);
}
}

使用

concatMap

或

switchMap

在另一个可观察对象之后运行一个新的可观察对象（在您的例子中是

forkJoin

）

@Injectable（）
导出类设置服务{
defaultSettings:defaultSettings[]；
构造函数（私有apiService:apiService）{}
loadSettings（）：可观察{
返回此.apiService.getDefaultSettings（）管道(
//保存默认设置
//如果您只需要forkJoin的默认设置，则可能不需要此选项
轻触（defaultSettings=>this.defaultSettings=defaultSettings），
//现在运行下一个可观察的
concatMap（默认设置=>{
返回叉连接({
setting1:this.apiService.getSpecificSetting（'setting1'），
setting2:this.apiService.getSpecificSetting（'setting2'）
});
}),
//现在将forkJoin的结果映射到要返回的值
//在这种情况下不需要地图，
//因为进入forkJoin的参数与所需的返回结构匹配
//为了完整起见，我留了下来
映射（结果=>{
常量realData={
设置1:result.setting1，
设置2:result.setting2，
};
console.log（realData）；
返回真实数据；
})
);
}
}

浓缩版

如果没有注释和冗余调用，完成的结果如下所示：

@Injectable（）
导出类设置服务{
构造函数（私有apiService:apiService）{}
loadSettings（）：可观察{
返回此.apiService.getDefaultSettings（）管道(
concatMap（defaultSettings=>forkJoin({
setting1:this.apiService.getSpecificSetting（'setting1'），
setting2:this.apiService.getSpecificSetting（'setting2'）
}))
);
}
}

考虑使用toPromise方法将api调用转换为承诺。然后，您可以等待调用并等待您想要返回的结果。@schlonzo为什么要将可观测值转换为承诺？“可观测到的东西要强大得多。”库塔·米尔顿是的，你说得对。我误解了这个问题。我认为他希望返回数组形式的数据，而不是可观察的数据。我的错。请考虑使用toPromise方法将api调用转换为承诺。然后，您可以等待呼叫并等待您想要返回的结果