Laravel vue js mixins не получает функциональный ответ

Question

Я использую laravel 5.8 с vue js. Я создал обобщенную функцию для отправки / получения запросов. Проблема в том, что я не получаю ответ функции mixins. Вот мой код:

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;
            });
        }
    }
}

Результат консоли undefined

Я не получаю ответ от функции testMixin(). Может кто-нибудь помочь, пожалуйста

Answer 1

Если вы хотите вернуть ответ от миксина, вам нужно будет обернуть этот аксиос запрос в обещание:

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

И если вы хотите получить результат от другой функции:

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

Но на самом деле это анти-паттерн - возвращать только ответ от обещания.То, как вы создали этот миксин, служит psuedo-API для внутреннего использования, поэтому вместо этого просто верните запрос axios:

return axios.post(url)

Теперь вы можете справиться с этим самостоятельно:

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

Answer 2

Вам нужно вернуть обещание, что-то вроде ниже

В тебе миксин

return axios.post(url);

А теперь в компоненте используйте его, как показано ниже.

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