Vue async call REST API in Vuex store-CodePudding

My async actions do not run correctly. Im new to Vue and JS and I am not sure what is happening here. I placed some confirm() dialogs within my code, to see which line passed and which not.

Within the ScanView.vue I call my addProduct action. I get the confirm dialog saying "addProduct" and dispatch calles the next 'callAPI' action where I get the "callAPI" confirm dialog but nothing more. Seems like fetch() isnt working at all, because no any other dialog is shown. What am I doing wrong?

Thanks

ScanView.vue

export default defineComponent({
  name: "Home",
  methods: {
    scanEan() {
      // QR Code Scanner Logic
      this.$store.dispatch("addProduct", ean);
    }
});

main.js

const store = new Vuex.Store({
  state: {
    products: [{
      name: 'Produkt',
      ean: '123',
      amount: '1',
      smallImageUrl: 'smImage',
      mediumImageUrl: 'mdImage',
      largeImageUrl: 'lgImage',
      expiration: []
    }]
  },
  mutations: {
    addProduct(state, product) {
      state.products.unshift(product);
    }
  },
  actions: {
    addProduct(context, ean) {
      confirm("addProduct: "   ean);
      context.dispatch('callAPI', ean);
    },
    callAPI(context, ean) {
      confirm("callAPI: ");
      fetch("https://world.openfoodfacts.org/api/v0/product/"   ean   ".json") //
        .then(response => {
          confirm("reesponse");
          return response.json();
        }
        ) //
        .then(data => {
          confirm("data: "   data);
          context.dispatch('saveProduct', data);
        });
    },
    saveProduct(context, data) {
      confirm("saveProduct: ");
      const name = data.product.product_name;
      const ean = data.code;
      const smImage = data.product.image_front_thumb_url;
      const mdImage = data.product.image_front_small_url;
      const lgImage = data.product.image_front_url;
      const expiration = new Array();
      const date = new Date(data.product.expiration_date);
      expiration.push(date);
      const product = new Product(
        name,
        ean,
        smImage,
        mdImage,
        lgImage,
        expiration
      )
      confirm("Produktdata: "   product);
      context.commit('addProduct', product);
    }
  }
});

app.use(store);

EDIT I build a simulate button for better testing. QR Scanning does not work in Browser.

Result It does work in Browser. But not on my emulator or android device. Seems like fetch() isnt the right way with ionic-vue. If I catch the error I got TypeError: Failed to fetch...

<template>
    <button @click="simulateScan">Simulate Scan</button>
</template>

<script>
export default {
  methods: {
    simulateScan() {
      this.$store.dispatch('addProduct', 737628064502);
    }
  }
};
</script>

CodePudding user response：

Try to wait for response:

async callAPI(context, ean) {
  confirm("callAPI: ");
  await fetch("https://world.openfoodfacts.org/api/v0/product/"   ean   ".json") //

CodePudding user response：

Final Solution

fetch() does not work on android. You have to use something like cordova-http, capacitor-http, ionic-http or else. I used capacitorcommunity-http.

npm install @capacitor-community/http
npx cap sync

import { Http } from '@capacitor-community/http';    

[...]

callAPI(context, ean) {
      var eanurl = "https://world.openfoodfacts.org/api/v0/product/"   ean   ".json";
      Http.get({ url: eanurl}) //
        .then(response => {
          return response.data;
        }
        ) //
        .then(data => {
          console.log(data);
          context.dispatch('saveProduct', data);
        }).catch(error => confirm(error));
    },

[...]