Tengo mi clase de configuración:
interface ConfigObject { apiUrl: string; identityPoolId: string; identityPoolRegion: string; region: string; userPoolId: string; userPoolWebClientId: string; } class Configuration { private static _instance: ConfigObject; public static get Instance() { return ( this._instance || this.getConfig<ConfigObject>().then((config) => { this._instance = config; return config; }) ); } private static async getConfig<TConfig>(): Promise<TConfig> { const response = await fetch('env.json', { headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', }, }); if (!response.ok) { throw new Error(response.statusText); } const data = await response.json(); return data; } } export default Configuration.Instance;y quiero acceder a sus valores en mi servicio:
export default class APIService { static baseURL: string = `${Config.apiUrl}/mocked`; Sin embargo, en el momento de acceder a Config.apiUrl no está undefined
¿Cómo puedo asegurarme de que se ejecute la obtención de getConfig y se devuelva el objeto real en su lugar?
No puede hacer que un proceso asincrónico sea sincrónico. Pero puede hacer que su módulo espere para cargarse hasta que haya leído ese archivo JSON, usando await de nivel superior , que ahora es ampliamente compatible con los navegadores y los paquetes.
async function getConfigData(): Promise<ConfigObject> { const response = await fetch('env.json', { headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', }, }); if (!response.ok) { throw new Error(response.statusText); } const data: ConfigObject = await response.json(); return data; } const data = await getConfigData(); // *** Module load waits here class Configuration { private static _instance: ConfigObject; public static get Instance() { if (!this._instance) { this._instance = data; } return this._instance; } } export default Configuration.Instance; Dicho esto, no parece haber ningún propósito para la clase de Configuration , solo exporte los datos directamente:
async function getConfigData(): Promise<ConfigObject> { const response = await fetch('env.json', { headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', }, }); if (!response.ok) { throw new Error(response.statusText); } const data = await response.json(); return data; } const data: ConfigObject = await getConfigData(); // *** Module load waits here export default data; Nota al margen: dado que los objetos son mutables de forma predeterminada, cualquier módulo que importe los datos de configuración puede modificarlos (por ejemplo, si hay una propiedad data.example , haciendo data.example = "some value" ). Tal vez quiera que sea mutable, en cuyo caso no haga nada, pero si no lo hace, puede usar Object.freeze para hacer que todo sobre el objeto sea de solo lectura:
// ... const data: ConfigObject = await getConfigData(); Object.freeze(data); // *** Freezes the object export default data;