javascript variable outside function (with async/await)?

Question

I have following code which doesn't work due to syntax error (await outside an async function)

how do I define a variable with await and export it?
When I define a variable like this and import it from other files, does the variable gets created only once (when file is first read?) or gets created everytime when it's imported?

Code..

import _ from 'lodash'
import remoteConfig from '@react-native-firebase/remote-config'

class RemoteConfig {
  constructor() {
    if (__DEV__) {
      //Fetch, no cache. activate
      remoteConfig().fetchAndActivate(0)
    } else {
      //Fetch, cache for 5 minutes and activate
      remoteConfig().fetchAndActivate()
    }
  }

  static async build() {
    await remoteConfig().setConfigSettings({
      minimumFetchIntervalMillis: 300000,
    })

    return new RemoteConfig()
  }

  setDefaults(defaults) {
    remoteConfig().setDefaults(defaults)
  }

  getValues(keys) {
    return _.pick(remoteConfig().getAll(), keys)
  }

  getValue(key) {
    return remoteConfig().getValue(key)
  }
}

export let firebaseConfig = await RemoteConfig.build()

I'm using it with import {firebaseConfig} from path/to/thefile

@yash I think you're looking to use a singleton pattern. since you're already using async functions inside your constructor, why not just call your build() method from there and just export a single instance of your class? — 4UmNinja
– 4UmNinja, Commented Jul 27, 2020 at 3:46

andsilver · Accepted Answer · 2020-07-27 04:00:42Z

1

await can be only used in async function. It's not possible to export a variable with await syntax.
Since the export with await is not possible, it's difficult to say if the RemoteConfig.build() will be called each time. If we assume, you wrote firebaseConfig = RemoteConfig.build();. The function will be called one time when the module is evaluated.

Here is a workaround:

You can define a function to set the firebaseConfig and call it at the time of app start.

So:

export let firebaseConfig;

export async function setFirebaseConfig() {
    firebaseConfig = await RemoteConfig.build();
}

This will allow you to not call the RemoteConfig.build() more than once. Also the firebaesConfig can be exported without await syntax.

edited Jul 27, 2020 at 4:00

answered Jul 27, 2020 at 3:37

andsilver

6,0323 gold badges22 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

4UmNinja Over a year ago

if OP was not looking to execute a function in the import, could an async self invoking function be used in its stead?

FZs Over a year ago

RemoteConfig.build() won't be evaluated multiple times. Module code is evaluated first time when it is imported, then the same exports returned to all importers.

andsilver Over a year ago

I am not sure what you mean by OP was not looking to execute a function in the import

andsilver Over a year ago

I dont think so. Because if he imports the config from a child component, the function will be called each time the component appears. Just calling it at app bootstrap will initialize the firebaseConfig and it can be used across the app.

andsilver Over a year ago

@eugene, it's only once.

|

FZs · Accepted Answer · 2020-07-27 03:52:46Z

0

To make this work, you have to wait for the "Top-level await" proposal (currently at Stage 3), that allows doing so (with a transpiler like Babel, you can use it now). It would allow exactly the same code that you have.

Until then, the only way to achieve a variable to exported like this to make the variable's value a promise, that all importers have to await on its own.

answered Jul 27, 2020 at 3:52

FZs

18.8k13 gold badges47 silver badges56 bronze badges

Collectives™ on Stack Overflow

javascript variable outside function (with async/await)?

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related