fetchProtein.vue

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

<script>
  // 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: 'FetchProtein',
  props: ['protein'],
  data() {
    return {
      response: null,
      loading: false,
      fetchError:'',
      isDev: process.env.NODE_ENV === 'development',
    };
  },
  computed: {
    jwt: function () {
      return this.$store.getters['User/jwt'];
    },
  },
  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}/proteins/${vm.protein}`;

        if (vm.protein && !_.isEmpty(vm.protein)) {
          try{
          const res = await fetch(url, {
            method: 'GET',
            mode: 'cors',
            cache: 'no-cache',
            headers: {
              Authorization: `Bearer ${apikey}`
            }
          })
          // console.log('protein res', res);
          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){
            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>