Problem using promise and await on a Vue method

Question

I'm running a function in mounted() to grab files from my Dropbox account using a promise. On success of this promise, I loop all files and run another promise function to grab additional info of each files and add it to object.

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

But this return an error:

Cannot read property 'getFileInfo' of undefined

gleam · Accepted Answer · 2019-02-07 12:58:12Z

3

You have a scope-problem - wrong this:

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

Or you can do:

processArray.bind(this)(files);

UPD (from comments):

You forgot return in getFileInfo-method

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

edited Feb 7, 2019 at 12:58

answered Feb 7, 2019 at 12:30

gleam

8706 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

marcelo2605 Over a year ago

Both suggestions fixed the error. But now the successFileInfo method return undefined instead response object. I confirm that console.log(response); inside the method return the object.

gleam Over a year ago

getFileInfo-method returns nothing ;)

marcelo2605 Over a year ago

Return an object from successFileInfo(). await vm.getFileInfo(item.id) is not waiting for this function return?

marcelo2605 Over a year ago

Fixed! Thanks ;)

James Coyle · Accepted Answer · 2019-02-07 12:32:56Z

1

When you call item['meta'] = await this.getFileInfo(item.id);, this refers to the scope of the processArray function and not the vue component.

If I'm not mistaken, you should just be able to do:

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

answered Feb 7, 2019 at 12:32

James Coyle

10.5k2 gold badges42 silver badges49 bronze badges

Collectives™ on Stack Overflow

Problem using promise and await on a Vue method

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related