title: Javascript get data from promise (axios)
body: <p>I am making a Vue.js web-app and I am running into some javascript issues. I will describe the entire Vue.js setup just in case, but I don't think its really relevant. I know that there are other postss on this issue, but after a day and a half of trying to figure it out I couldn't find any posts that helped me enough to figure it out.</p>
  
  <p><strong>The problem</strong>:</p>
  
  <p>I am trying to access data from my backend in my frontend. I am using an axios request that looks as follows:</p>
  
  <pre><code>axios.request({...}).then(function (response) { ... }.catch(function (error) { ... });
  </code></pre>
  
  <p>The <code>response</code> in the <code>.then</code> gets the correct data I want (an array) but I can't figure out how to get that data out, since the .then is a promise. The reason I need to get it out is because this is all inside a in a method inside a component and I want to equate the response to a value in my data variable. So basically I want to do:<br>
  <code>this.myvar = this.myvar.concat(response)</code><br>
  but inside the <code>.then</code> I am outside of the scope of my component, so I want to get the response out of the <code>.then</code> so that I can change my data to it.  </p>
  
  <p>I understand that theoretically I can append more <code>.then</code>s to do what I want with the response, and that is how javascript handles the synchronicity, but there is nothing I want to do with the data, other than make an out-of-scope variable equal to it.</p>
  
  <p><strong>My attempt:</strong></p>
  
  <p>One thing I found is that I can declare a separate variable right before the axios request, and for some reason that variable will be available to me inside the <code>.then</code>. So I tried initializing a new variable to be a pointer to the component data variable that would be out-of-scope (<code>this.myvar</code>) and then change that variable in the <code>.then</code> to the response, but then that reaises other issues because I end up returning my function (that contains the axios request and everything) before that variable gets changed inside the <code>.then</code> do to the synchronicity and that causes other issues.</p>
  
  <p>Edit: 
  <strong>My code</strong>
  this is a computed method inside a component. It has to return this.myvar as it is called inside a Vuejs template.</p>
  
  <pre><code>MyFunc: function () {  
      var a = this.myvar;                                                                                            
      axios.request({                                                                                                
          method: 'post',                                                                                              
          url: 'http://myURL:MyPort/query',                                           
          data: {                                                                                                      
             'mydata': dataToSend                                                                                                         
          },                                                                                                           
      }).then(function (response) {                                                                                  
          a = a.concat(Object.values(response.data.results));                                                        
      }).catch(function (error) {                                                                                           
          console.log(error);                                                                                          
      });
      return this.myvar
  }                   
  </code></pre>
  
  <p>This is not the first time I have had problems with promises in javascript, I have tried reading up on them but I just can't understand completely how to deal with them. Any help would be grteatly appreciated.</p>