On a vue application, on a component, calling API to get some data... the problem is that getting undefined, before the call ends... Possible needed aync/await but getting error when adding

//component code (login.vue)

import store from "@/store";

const { response, error } = store.postTO(url, [{id: "button1"}, {id: "button2"}, {id: "button3"}]);
if (response) {
  console.log(response);
} else {
  console.warn(error);
}


//store.js
export default {
    user : null,
    postTO
}


function postTO(url, postData) {

    const requestOptions = {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: JSON.stringify(postData)
    };
    
    return fetch(url, requestOptions).then(response => 
         response.json().then(data => ({
            data: data,
            status: response.status
        })
    ).then(res => {
        console.log(res.data);
        return {response : res.data, error : "test"};
    }))
    .catch(error => {
        return {response : "test", error : error};
    });

}

illustrated

CodePudding user response：

In the component you have to wait for the fetch by putting an await before the store.posTo