title: Using promises in Axios requests
body: <p>I am trying to work out the best way to achieve something.  When I land on a Profile page, the Profile component loads the data for that profile.  This is assigned to <code>this.profile</code>. Within this data is a path to a file, where I want to process some data using this file.  To me, the below approach seems slightly risky. </p>
  
  <pre><code>created() {
      let vm = this;
  
      let url = `/api/profile/${this.$route.params.id}`;
      axios.get(url).then(response =&gt; {
          this.profile = response.data;
  
          d3.json(response.data.fileName)
          .then(function (data) {
              //do some stuff
  
          }).catch(function (error) {
              // handle error
          });
      });
  }
  </code></pre>
  
  <p>Instead of that, I want to ensure that I first have the data from the axios call.  So I am thinking I need a promise?  I was thinking something more along the lines off</p>
  
  <pre><code>created() {
      let vm = this;
  
      let url = `/api/profile/${this.$route.params.id}`;
      axios.get(url).then(response =&gt; {
          this.profile = response.data;
      }).then() {
          d3.json(response.data.fileName)
          .then(function (data) {
              //do some stuff
  
          }).catch(function (error) {
              // handle error
          });
      };
  }
  </code></pre>
  
  <p>But the above is incorrect, it is mainly to show what I am trying to achieve.  I was wondering how I can maybe use deferred and promises to only execute the d3 stuff once the axios call is made.</p>
  
  <p>Thanks</p>