title: Export the result of async function in React
body: <p>I'm building a React app with .NET Core and put some constant values in the appsettings.json file (nothing sensitive) and exposing these values as an API controller. My idea is to put the API call in a .js file and expose the values as a constant, so they will be available in all other .js files. </p>
  
  <p>I have the following:</p>
  
  <pre><code>var y = "foo";
  
  function successCallback(resp) {
      y = resp;
      console.log(y); //shows expected value
  }
  
  async function readConfig() {
      fetch('api/ClientConfiguration')
          .then(response =&gt; {
              if (response.ok) {
                  return response.json();
              } else {
                  throw new Error('error...')
              }
          })
          .then(responseJson =&gt; {
              successCallback(responseJson.apiUrl);
          });
  }
  
  readConfig();
  
  console.log(y); //shows "foo"
  
  export const clientConfig = {
      apiUrl: y
  };  
  </code></pre>
  
  <p>I understand that the async nature of <strong>fetch</strong> makes the property in const clientConfig always have "foo" value. Is there a way to export the value I want (using this or another approach)? Thanks.</p>