CODEWITHSUNDEEP
javascriptlaravelvue.jslaravel-5
Maha Dev
Maha Dev

Reputation: 3965

Laravel vue js mixins not getting function response

I am using laravel 5.8 with vue js. I have created a generalized function for post/get requests. The problem is, i am not getting the mixins function response. Here is my code :

TestComponent.vue

import GeneralMixin from '../mixins.js';
export default {
    mixins: [ GeneralMixin ],
    methods:{
        login: function (e) {
            let response;
            response = this.testMixin();
            console.log(response);
        }
    }
}

mixin.js

export default {
    methods: {
        testMixin: function () {
            url = '/test';
            axios.post(url).then(function(response, status, request) {  
                return response;
            });
        }
    }
}

The console result is undefined

I am not getting response of function testMixin() . Can anyone help please

Upvotes: 0

Views: 330

Answers (2)

Karan Sadana
Karan Sadana

Reputation: 1373

You need to return the promise, Something like below

In you mixin

return axios.post(url);

And now in component use it like below.

this.testMixin().then((response) => {
       console.log(response)
    }).catch((error) => {
       console.log(error.response.data)
    })

Upvotes: 0

Ohgodwhy
Ohgodwhy

Reputation: 50767

If you want to return the response from the mixin then you're going to need to wrap that axios request in a promise:

return new Promise((resolve, reject) => {
  axios.post(url).then(function(response, status, request) {  
     return resolve(response)
  })
})

And if you want the result of that from another function:

login: function (e) {
  this.textMixin().then((response) => {
    console.log(response)
  })
}

But really it's an anti pattern to return only the response from the promise. The way you've created this mixin serves as a psuedo-API for you to consume internally, so instead just return the axios request:

return axios.post(url)

Now you can handle this yourself:

login: function(e) {
    this.testMixin().then((response) => {
       console.log(response)
    }).catch((error) => {
       console.log(error.response.data)
    })
}

Upvotes: 1

Related Questions