Question

在 Vue 方法上使用 promise 和 await 的问题

2019-02-07

130

javascript vue.js vuejs2

我正在 mounted() 中运行一个函数，使用承诺从我的 Dropbox 帐户中抓取文件。此承诺成功后，我循环所有文件并运行另一个承诺函数来抓取每个文件的附加信息并将其添加到对象中。

data () {
    return {
        results: [],
        dropbox: [],
    }
},
mounted() {
    dropbox.filesListFolder({path: '/wallpapers'}).then(this.successHandler)
    this.dropbox = dropbox
},
methods: {
    successHandler (response) {
        const files = response.entries;
        async function processArray(files) {
            for (const item of files) {
                item['meta'] = await this.getFileInfo(item.id);
            }
        }
        processArray(files);
        this.results = files;
    }
    getFileInfo (id) {
        this.dropbox.filesGetMetadata({
            path: id,
        })
        .then(this.successFileInfo)
    },
    successFileInfo (response) {
        return response; 
    }
}

但这会返回错误：

Cannot read property 'getFileInfo' of undefined

Answer 1

您有一个范围问题 - 错误的 此 ：

    let vm = this;
    async function processArray(files) {
        for (const item of files) {
            item['meta'] = await vm.getFileInfo(item.id);
        }
    }

或者您可以执行以下操作：

processArray.bind(this)(files);

UPD（来自评论）：

您忘记了 getFileInfo 方法中的返回值

getFileInfo (id) {
    return this.dropbox.filesGetMetadata({
        path: id,
    })
    .then(this.successFileInfo)
}

Answer 2

当您调用 item['meta'] = await this.getFileInfo(item.id); 时， this 指的是 processArray 函数的范围，而不是 vue 组件。

如果我没记错的话，您应该可以执行以下操作：

async successHandler (response) {
    const files = response.entries;
    for (const item of files) {
        item['meta'] = await this.getFileInfo(item.id);
    }
    processArray(files);
    this.results = files;
}