Laravel vue js mixins没有得到函数响应答案

【问题标题】：Laravel vue js mixins not getting function responseLaravel vue js mixins没有得到函数响应
【发布时间】：2019-05-30 07:25:00
【问题描述】：

我正在使用带有 vue js 的 laravel 5.8。我为发布/获取请求创建了一个通用函数。问题是，我没有得到 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() 的响应。谁能帮忙

【问题讨论】：

任何控制台错误？
是的，更新问题！

标签： javascript laravel vue.js laravel-5

【解决方案1】：

如果您想从 mixin 返回响应，那么您需要将该 axios 请求包装在一个 Promise 中：

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

但实际上只返回来自承诺的响应是一种反模式。您创建此 mixin 的方式用作您在内部使用的伪 API，因此只需返回 axios 请求：

return axios.post(url)

现在你可以自己处理了：

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

【讨论】：

【解决方案2】：

您需要返回承诺，如下所示

在你的混入中

return axios.post(url);

现在在组件中使用它，如下所示。

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

【讨论】：