Vue 方法混合答案

【问题标题】：Vue methods mixinsVue 方法混合
【发布时间】：2017-10-22 20:45:57
【问题描述】：

我的 mixins 文件中有 getNames 方法，它返回名称。

import { default as config } from '../config';
var methods = {
    methods: {
        getNames() {
            return axios.get(API + API.NAMES)
            .then( (response) => {
                if( response.status == 200 && typeof(response.data) == 'object' ) {
                    return response.data;
                }
            });
        }
    }
};

export default methods;

我从我的单个模板文件中导入了 mixins/methods 文件。现在我的问题是如何从 getNames 方法获取返回对象数据。因为当我试图

mixins: [
            filters,
            methods
],
mounted: function() {
            var a = this.getNames();
            console.log(a);
        }

getNames 方法只返回一个 Promise

Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
__proto__
:
Promise
[[PromiseStatus]]
:
"resolved"
[[PromiseValue]]
:
Object

【问题讨论】：

标签： javascript vue.js components frontend mixins

【解决方案1】：

axios.get() 调用是异步的，它返回一个Promise。它不会返回传递给链式then 方法的匿名函数的值。

为了访问该值，您可以将then 方法链接到返回的Promise，如下所示：

mounted: function() {
  this.getNames().then(a => { console.log(a) });
}

【讨论】：