title: Wait for a method task to be done before doing anything else
body: <p>I have a class, with methods... one of these actually contains a fetch to get an svg file. Nothing really fancy there.
  The problem actually doesn't lie in the class, but when using it.</p>
  
  <p>I have a method getDataFromFile(url), I pass it my SVG url and it does a bunch of stuff. The problem is... When I use it, if I call another method right after it, or even just a console.log... As it hasn't yet fecthed the file, I get "undefined" where it should show an object.</p>
  
  <p>Of course if I set a timeout, it works, but that means that everything after it has to be in a timeout... I could also very well set a timeout in the method called after it, but then this one would become asynchronous too.</p>
  
  <p>I've tried bunch of things, and I don't really get promises and stuff alike so... I'm totally stuck there!</p>
  
  <p>Here's a (very) simplified version of my code, I know it's far from optimal (I'm a begginer) but here it is anyway:</p>
  
  <pre><code>var ParentClass = function ()
  {
      // Attributes and stuff
  
      this.paths = [];
  }
  
  
  var MyClass = function ()
  {
      ParentClass.call( this );
  }
  
  
  MyClass.prototype.getInlineDOMdata = function ( selector )
  {
      // Stuff going on...
  
      let querySelector = document.querySelectorAll( selector + " path" );
  
      for ( let i = 0; i &lt; querySelector.length; i++ )
      {
          this.paths.push(
              {
                  name: querySelector[ i ].id,
                  color: querySelector[ i ].style.fill,
                  pathData: querySelector[ i ].attributes.d.value
              }
          );
      }
  
  }
  
  
  MyClass.prototype.getInlineData = function ( inlineCode )
  {
      let domTarget = document.querySelector( "body" );
  
      domTarget.innerHTML += `&lt;div class="placeholder"&gt;${ inlineCode }&lt;div&gt;`;
  
      let domContainer = document.querySelector( ".placeholder" );
  
      // Stuff going on...
  
      this.getInlineDOMdata( ".placeholder svg" );
  
      domContainer.remove();
  }
  
  
  MyClass.prototype.getDataFromFile = function ( url )
  {
      fetch( url )
          .then( response =&gt; response.text() )
          .then( data =&gt; this.getInlineData( data ));
  }
  </code></pre>
  
  <p>Program side it looks like that :</p>
  
  <pre><code>document.addEventListener( "DOMContentLoaded", loadComplete );
  
  function loadComplete ()
  {
      var test = new MyClass();
      test.getInlineData( `
       &lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 195 82"&gt;
               &lt;!--Some SVG code --&gt;
       &lt;/svg&gt;
        ` );
       console.log( test.paths[ 0 ] ); // Object { name... }
       console.log( test.paths.length ); // 4
  
  
      test.getInlineDOMdata( "svg" );
      console.log( test.paths[ 0 ] ); // Object { name... }
      console.log( test.paths.length ); // 4  */
  
      test.getDataFromFile( "https://upload.wikimedia.org/wikipedia/en/c/ce/SVG-logo.svg" );
      console.log( test.paths[ 0 ] ); // undefined
      console.log( test.paths.length ); // 0
  
      setTimeout( function ()
      {
          console.log( test.paths[ 0 ] ); // Object { name... }  
          console.log( test.paths.length ); // 4
      }, 1000 );
  }
  </code></pre>
  
  <p>So when I use getInlineData, it works.
  When I use getInlineDOMdata, it works.
  When I use getDataFromFile, it doesn't! But if I put a timer, it does.</p>
  
  <p>I find that really "dirty" and I'm desperate to find a proper solution where I could simply call any other method directly bellow this one!</p>
  
  <p><strong>EDIT : SOLVED!</strong></p>
  
  <p>With the use of <code>async</code>/<code>await</code>, just changing my method <code>getDataFromFile</code> to</p>
  
  <pre><code>MyClass.prototype.getDataFromFile = async function ( url )
  {
      let response = await fetch( url )
          .then( response =&gt; response.text() );
  
      await this.getInlineData( response );
  }
  </code></pre>
  
  <p>and program side, adding <code>async</code> in front of my <code>loadComplete</code> function, and <code>await</code> in front of my <code>test.getDataFromFile( "urlToSvg.svg" );</code> line solved my issue!</p>
  
  <p>Thanks to Leftium for the great tutarial he provided (<a href="https://eloquentjavascript.net/11_async.html" rel="nofollow noreferrer">tutorial</a>), which made me finally get how promises work</p>