title: $emit inside async method - Vue2
body: <p>Here's my child's component async method:</p>
  
  <pre><code>async created () {
    this.$parent.$emit('loader', true)
    await this.fetchData()
    this.$parent.$emit('loader', false)
  }
  </code></pre>
  
  <p><code>fetchData</code> does an axios get call, to fetch data from API. However in a vue-devtools (events tab) i can only see the events, after i change the code and it hot reloads. Also i've set up <code>console.log()</code> in a parent component:</p>
  
  <pre><code>mounted() {
    this.$on('loader', (value) =&gt; {
      console.log(value)
    })
  }
  </code></pre>
  
  <p>And i can see only <code>false</code> in a console. My purpose is to emit loader set to true (so i can show the loader), then set it to false, when data is fetched.</p>
  
  <p>My fetchData method:</p>
  
  <pre><code>import http from '@/http'
  
  fetchData() {
    return http.getOffers().then((resp) =&gt; {
      this.offersData = resp.data
    })
  }
  </code></pre>
  
  <p>Contents of http.js:</p>
  
  <pre><code>import axios from 'axios'
  import config from '@/config'
  
  const HTTP = axios.create({
    baseURL: config.API_URL
  })
  
  export default {
    /* calculator */
    getOffers() {
      return HTTP.get('/url')
    }
  }
  </code></pre>
  
  <p>If i directly use <code>return axios.get()</code> in <code>async created()</code>, then it works. Problem is in this imported http instance.</p>
  
  <p><strong>Final solution</strong></p>
  
  <p>One of the problems was using different lifecycles, thanks to <a href="https://stackoverflow.com/users/1572938/evan-kennedy">Evan</a> for mentioning this.</p>
  
  <p>Another problem was with async / await usage, changes to a <code>fetchData()</code> method:</p>
  
  <pre><code>import http from '@/http'
  
  async fetchData() {
    await http.getOffers().then((resp) =&gt; {
      this.offersData = resp.data
    })
  }
  </code></pre>
  
  <p>I had to make this method async and use await on axios request, since await is <a href="https://scotch.io/tutorials/asynchronous-javascript-using-async-await" rel="nofollow noreferrer">thenable</a>, it does work. Also i've spotted an issue in https.js:</p>
  
  <pre><code>export default {
    /* calculator */
    getOffers() {
      return HTTP.get('/url')
    }
  }
  </code></pre>
  
  <p>It returns <code>HTTP.get()</code>, not a promise itself, i could have used <code>then</code> here, and it would work, but, for flexibility purposes i didn't do that.</p>
  
  <p>But, still, i don't get why it didn't work:</p>
  
  <pre><code>fetchData() {
    return http.getOffers().then((resp) =&gt; {
      this.offersData = resp.data
    })
  }
  </code></pre>
  
  <p>Isn't it already returning a promise, since it's chained with then... So confusing.</p>
  
  <p>Retested again, seems like <code>return</code> is working, lol.</p>