I have a small ponent in vuejs for file uploading (using axios). I am trying to emit the response from the file upload like this:

methods: {
  ...
  upload (){
    axios.put(URL).then(response => {

    console.log('response', response)
    this.$emit('uploaded', response)

    }).catch(error => {

    })
  }

}

But in this code, even though the console.log() response shows up fine, the emit shows undefined. I think the emit is getting called before the response is ready.

Is there anyway to use async/await to solve this issue?

I have a small ponent in vuejs for file uploading (using axios). I am trying to emit the response from the file upload like this:

methods: {
  ...
  upload (){
    axios.put(URL).then(response => {

    console.log('response', response)
    this.$emit('uploaded', response)

    }).catch(error => {

    })
  }

}

But in this code, even though the console.log() response shows up fine, the emit shows undefined. I think the emit is getting called before the response is ready.

Is there anyway to use async/await to solve this issue?

• javascript
• async-await
• vuejs2

Share Improve this question Follow edited Oct 25, 2019 at 3:44 Cœur 38.8k2525 gold badges205205 silver badges277277 bronze badges asked Oct 28, 2017 at 13:28 hidarhidar 5,9491616 gold badges4949 silver badges7575 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

console.log response shows up fine but the emit shows undefined.

Not sure what you mean by that, because if the response is available inside of console.log it should also be available inside of this.$emit. (Unless this.$emit itself is giving you undefined in which case you have scoping issues, but that shouldn't be the case as you seem to be using arrow functions).

I think the emit is getting called before the response is ready

It is inside of a callback so it should only get called once the request pletes.

But if you want to try async / await then do this:

async upload() {
  try {
     let response = await axios.put(URL);
     console.log('response', response)
     this.$emit('uploaded', response)
  } catch(error) {
     // error
  }
}