Return axios response from async service (Vue + Nuxt)

Question

I am trying to return data from axios response from service, but I will always receive from service undefined, but inside service I have data. Can you tell what am I doing wrong?

this is how my service looks like:

import axios from 'axios';

export default {
  async fetchById (articleId) {
    await axios.post('/api/article', { id: articleId })
      .then(function (response) {
        console.log('axios', response) // valid response
        return response.data
      })
      .catch(function (e) {
        console.error('error', e);
      });
  }
}

And there is my usage in component:

async created () {
  const article = await articleService.fetchById('12345')
  console.log('article', article) // there I have undefined
}

fodma1 · Accepted Answer · 2020-10-09 15:47:37Z

5

You're missing a return statement

import axios from 'axios';

export default {
  async fetchById (articleId) {
    // Missing `return` in the next line
    return await axios.post('/api/article', { id: articleId })
      .then(function (response) {
        console.log('axios', response) // valid response
        return response.data
      })
      .catch(function (e) {
        console.error('error', e);
      });
  }
}

I'd encourage you to start using TypeScript, these kind of errors can be easily avoided by having proper typings for functions.

answered Oct 9, 2020 at 15:47

fodma1

3,5451 gold badge33 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Boussadjra Brahim Over a year ago

Good, i'm agree with you typescript saves the time spent in debugging

Denis Stephanov Over a year ago

thank you, I didnt aware that inner return not returns value from function

Boussadjra Brahim · Accepted Answer · 2020-10-09 15:47:15Z

2

In the first example you could use only async/await then return the result :

import axios from 'axios';

export default {

  async fetchById (articleId) {
     try{
     const  response= await axios.post('/api/article', { id: articleId })
        return response.data
      }catch(e){
        console.error('error', e);
        return null;
      };
  }
}

answered Oct 9, 2020 at 15:47

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Comments

Ali Chraghi · Accepted Answer · 2020-10-15 21:53:59Z

0

You Can Use callback() function. this is when you pass a function as a parameter into your existing function which will be executed once your axios call has finished. Here is how it would work with your code:

async fetchById (articleId) {
  await axios.post('/api/article', { id: articleId })
  .then(function (response) {
    console.log('axios', response) // valid response
    callback(response.data)
  })
  .catch(function (e) {
    console.error('error', e);
  });
}

answered Oct 15, 2020 at 21:53

Ali Chraghi

8498 silver badges17 bronze badges

Collectives™ on Stack Overflow

Return axios response from async service (Vue + Nuxt)

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related