title: How do you properly use AJAX to set the property of a class through a method
body: <p>I'm having trouble wrapping my head around asynchronous calls at the class level. I understand why this doesn't work (single threaded JS calling method before the async call from the first method is complete) but I need some assistance on how to work around it/implement it correctly. I dumbed down my use case below.</p>
  
  <p>Here would be my class:</p>
  
  <pre><code>class car {
      constructor(){
          this.carColor= null;
          this.getCarColorFromDB = this.getCarColorFromDB.bind(this);
      }
      getCarColorFromDB() {
          axios.get('carColor.JSON').then((color) =&gt; {
              this.carColor = color;
          })
      }
      outputCarColor() {
          return this.carColor;
      }
  }
  export default new car
  </code></pre>
  
  <p>and here would be a function that lives inside the component:</p>
  
  <pre><code>someFunction() {
      car.getCarColorFromDB();
      return &lt;span&gt;The cars color is {car.outputCarColor()}&lt;/span&gt;
  }
  </code></pre>
  
  <p>The behavior I'm after is for the car color to be set in the class via ajax and then be retrievable once I make my second call.</p>