fetchProfile.vue

<template>
  <div>
    <slot :response="response" :loading="loading"></slot>
  </div>
</template>

<script>
// require modules
const _ = require('lodash');
let host = require('../js/const').apiHost;

export default {
  name: "fetchProfile",
  props: ['is-experimental'],
  data() {
    return {
      loading: true,
      response: '',
      isDev: process.env.NODE_ENV === 'development'
    }
  },
  methods: {
    getItems() {
      const vm = this;

      // console.log(host)

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

      // console.log(vm.isExperimental)

      let url = `${host}/api/users/me`;

      const jwt = window.localStorage.getItem('jwt');
      if(jwt === null) {
        vm.loading = false;
        vm.response = null;
        return
      }

      fetch(url, {
        method: 'GET',
        mode: 'cors',
        cache: 'no-cache',
        headers: {
          Authorization: `Bearer ${jwt}`
        }
      })
          .then(response => response.json())
          .then((response) => {
            // /* eslint-disable no-console */
            // console.log(response);

            setTimeout(() => {
              vm.loading = false;
              vm.response = response
            }, 10);
          });
    }
  },
  mounted() {
    const vm = this
    // /* eslint-disable no-console */
    // console.log(vm.locus);
    vm.getItems();
  },
}
</script>

<style scoped>

</style>