Javascript in VueJs: how to return data object from async fetch instead of Promise

Question

I have this action in store

actions: {
    testLogin(context, credentials) {
        const loginService = new FetchClient();
        let d = loginService.post('login', credentials);
        console.log(d);
    },

and this function in another class imported to store

async post(endpoint, params) {
    await fetch(this.url + endpoint, {
        'method': 'POST',
        headers: this.headers,
        body: JSON.stringify(params),
    })
        .then(response => {
            return response.json();
        })
        .then( (data) => {
            this.returnData =  data.data;
        })
        .catch(error => {
            console.log(error);
        });
    return this.returnData;
}

And I get Promise {<pending>} which I can extract data from inside the fetch class but can't access data if I'm in the store because it's a Promise not an object. How can I solve this?

As async methods return promises you need to work with that. — Jon P
– Jon P, Commented Nov 11, 2020 at 23:11
Simply put, an asynchronous result can't be made synchronous without a psychic or time travel - javascript contains neither — Jaromanda X
– Jaromanda X, Commented Nov 12, 2020 at 0:09

Ayudh · Accepted Answer · 2020-11-12 03:40:03Z

1

Put the return statement inside the second then block:

async post(endpoint, params) {
    await fetch(this.url + endpoint, {
        'method': 'POST',
        headers: this.headers,
        body: JSON.stringify(params),
    })
        .then(response => {
            return response.json();
        })
        .then( (data) => {
            this.returnData =  data.data;
            return this.returnData;
        })
        .catch(error => {
            console.log(error);
        });
}

I would even recommend you use the following code for better legibility:

async post(endpoint, params) {
    const response = await fetch(this.url + endpoint, {
        'method': 'POST',
        headers: this.headers,
        body: JSON.stringify(params),
    })

    if (!response.ok) {
        const message = `An error has occured: ${response.status}`;
        throw new Error(message);
    }
    
    const resp_data = await response.json()

    return resp_data.data
}

Then call your method like so:

post(endpoint, params)
    .then(data => {// do something with data})
    .catch(error => {
        error.message; // 'An error has occurred: 404'
    });

refer to this async/await guide

edited Nov 12, 2020 at 3:40

answered Nov 12, 2020 at 3:30

Ayudh

1,7651 gold badge32 silver badges65 bronze badges

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

1 Comment

anatolhiman Over a year ago

Can recommend to always add a try/catch block in order to handle errors better.

im dev · Accepted Answer · 2020-11-12 03:46:58Z

0

Can you try:

async testLogin(context, credentials) {
    const loginService = new FetchClient();
    let d = await loginService.post('login', credentials);
    console.log(d);
}

answered Nov 12, 2020 at 3:46

im dev

896 bronze badges

1 Comment

PHP User Over a year ago

It does log the data but in the js file I use it I find it returned as promise not as data

laguf1.mobi · Accepted Answer · 2020-11-16 02:05:43Z

0

As @Ayudh mentioned, try the following code:

    async post(endpoint, params) {
    try{
        let response = await fetch(this.url + endpoint, {
            'method': 'POST',
            headers: this.headers,
            body: JSON.stringify(params),
        });
        let data = await response.json();
        this.returnData =  data.data;
    }catch(e){
        console.log(e);
    }
    
    return this.returnData;
}

answered Nov 16, 2020 at 2:05

laguf1.mobi

1816 bronze badges

Collectives™ on Stack Overflow

Javascript in VueJs: how to return data object from async fetch instead of Promise

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related