title: Await the same API call in multiple functions
body: <p>I have an API call that I want to be called in one function, but awaited in a different callback.</p>
  
  <p>E.g. I want to make a GET request on load so that the data is available as soon as possible, but I need a "submit" function to await the GET request so that it doesn't fire before the data is available. </p>
  
  <p>This is due to a race condition I have between 2 asynchronous functions, where depending on API response time, could take more or less time than an authentication callback that has the control logic.</p>
  
  <p>I'd rather perform both calls at the same time so that it can run as fast as possible in any scenario. I know this has higher cost since the data may not be used, but it's only done once per session on initial connection, so the potential decrease in load time is worth the extra potential extra API call.</p>
  
  <p>That said, here's what I'm currently doing:</p>
  
  <pre><code>  let initialized = false;
    let dataError = null;
    let dataWaiters = [];
    const dataLoaded = () =&gt; new Promise(( resolve, reject ) =&gt; {
      if ( initialized ) resolve();
      if ( dataError ) reject( dataError );
      dataWaiters.push({ resolve, reject });
    });
  </code></pre>
  
  <p>This allows me to make my axios get request on load, which will then resolve any / all promises in <code>dataWaiters</code>.</p>
  
  <pre><code>async onStart () {
    // Attempt to use a local copy if we can
    if ( session.has.token.already ) {
      loadFromCache();
      return;
    }
  
    // Else we need to get data from API server
    try {
      const { data } = await axios.get('https://my-api-server/api/temp-token');
      saveResposne( data );
      this.initialized = true;
      dataWaiters.forEach( waiter =&gt; waiter.resolve() );
    } catch ( err ) {
      dataError = err;
      dataWaiters.forEach( waiter =&gt; waiter.reject(err) );
    }
  }
  </code></pre>
  
  <p>Then in another callback function I can simply use <code>await dataLoaded()</code> to delay execution until this request had completed.</p>
  
  <pre><code>async onSomeCallback( data ) {
    if ( useTempToken ) {
      await dataLoaded();
      // use token...
    else {
      // use data...
    }
  }
  </code></pre>
  
  <p>This works, but I feel like there should be a way I can use the <code>axios.get</code> promise in a better way, and maybe use fewer 'global' variables. Is there a way I can handle this more elegantly?</p>