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

控制台结果是未定义

我没有收到函数 testMixin() 的响应。有谁可以帮忙吗

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

但实际上，仅返回 promise 的响应是一种反模式。您创建此 mixin 的方式作为一个伪 API 供您在内部使用，因此只需返回 axios 请求即可:

return axios.post(url)

现在你可以自己处理这个问题了:

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