REST Call from setup() function - ionic - vue.js

Question

I am currently struggling to make a REST Call to an external API from the setup function of my Ionic Vue Application. I tried it in the following way:

const oResponse = fetch(
   "url"
     ).then((Response) => Response.json());

return { Items: [{ name: 'Milch', Flag: '*' }, { name: 'Wasser', Flag: '*' },{name: 'BraTee', Flag: '*'}], currentRec: oResponse.recipes }

The Return structure looks like this:

{
  recipes": [
    { ... },
    { ... }
 ]
}

I can not get it to work because Ionic says "oResponse does not have a component called 'recipes'.

How would I deal with this error and fetch a REST call properly? Thanks in advance!

Answer 1

Maybe you should re write the api request. I usually use axios library to make api calls. Something like:

axios
      .post("url")  // Methods you can use also: .get , .put
      .then((response) => {
        return response.data;
      })
      .catch((error) => {
       console.log(
          "an error occurred"
        );
      });

npm install axios --> to install axios library

import axios from "axios"; ---> to import it in the component