fetchCondensate.vue

<template>
  <div class="mainContent">
    <slot
      :response="response"
      :loading="loading"
      :fetchError="fetchError"
    />
  </div>
</template>

<script>
import LoginVue from '../../views/Login.vue';
  // require modules
  /* eslint-disable no-unused-vars */
  const _ = require('lodash');
  let host = require('../js/const').host;
  const apikey = require('../js/const').apikey;

  export default {
    name: 'FetchCondensate',
    props: ['condensate'],
    data() {
      return {
        response: null,
        loading: false,
        fetchError:'',
        isDev: process.env.NODE_ENV === 'development'
      }
    },
    mounted() {
      const vm = this
      // /* eslint-disable no-console */
      // console.log(vm.locus);
      vm.getItems();
    },
    methods: {
      async getItems() {
        const vm = this

        // /* eslint-disable no-console */
        // console.log(vm.incDesc);

        vm.loading = true

        if(vm.isDev) {
          host = require('../js/const').devHost;
        }

        let url = `${host}/condensates/${vm.condensate}`;

       // console.log('url is', url);

        if (vm.condensate && !_.isEmpty(vm.condensate)) {
          // console.log('True');
          try{
           const res = await fetch(url, {
            method: 'GET',
            mode: 'cors',
            cache: 'no-cache',
            headers: {
              Authorization: `Bearer ${apikey}`
            }
          })
        
         
          if(!res.ok){
            vm.loading = false;
            vm.response = ''
            vm.fetchError = `${res.status} Internal Error, please write a mail to DDCode Admin.` 
            return;
          }
          vm.fetchError= '';
          const response = await res.json();
            setTimeout(() => {
                vm.loading = false;
                vm.response = response

                // console.log(response);
                // if (response && !_.isEmpty(response)) {
                //   this.response = _.flatMap(response, (n) => [{ text: n.name, style: 'background-color: ' + n.color }]);
                // }
              }, 10);


            // .then(response => response.json())
            // .then((response) => {
            //   /* eslint-disable no-console */
            //   console.log(response);

            //   setTimeout(() => {
            //     vm.loading = false;
            //     vm.response = response

            //     // console.log(response);
            //     // if (response && !_.isEmpty(response)) {
            //     //   this.response = _.flatMap(response, (n) => [{ text: n.name, style: 'background-color: ' + n.color }]);
            //     // }
            //   }, 10);
            // });
          }catch(err){
            console.log('in catch',err.message);
            vm.loading = false;
            vm.response = ''
            vm.fetchError = `${err.message} Internal Error, please write a mail to DDCode Admin.`
          }
          
        } else {
          vm.loading = false;
          vm.response = ''
        }
      }
    },
  }
</script>

<style scoped>
    .mainContent {
        padding: 20px;
    }
</style>