Vue Request Indicator

RequestIndicator.vue

<template lang="pug">
.request-indicator
  .sending(v-if="inProgress")
  .response-message(v-else)
</template>

<script>
const http = window.fetch

export default {
  props: ["url", "method"],

  data(){
    inProgress: false,
    response: {},
    message: "",
  },

  methods: {
    send({data = {}, headers = {}}){
      let {url, method} = this

      try {
        this.inProgress = true

        let result = http(url, {method, data, headers})
          .then(this.onReceive)

      } finally {
        this.inProgress = false
      }

      return result
    },

    onReceive(response){
      this.response = response
      let {message, errors, result} = response

      if(errors) this.$emit("error", errors);
      if(result) this.$emit("success", result);

      this.$emit("complete")
    },
  }

  computed: {    
  },
}
</script>

<style lang="sass">
</style>