@andrewcaires/vue-fetch v1.0.5

vue-fetch

VueJS plugin for the Fetch API

Installation

npm i @andrewcaires/vue-fetch

Usage

import VueFetch from '@andrewcaires/vue-fetch';
import Vue from 'vue';

Vue.use(VueFetch, {
  url: '/',             // url base
  headers: {},          // headers HTTP default
  logging: console.log, // execute on every request
  timeout: 5000,        // response timeout
});

export default Vue.extend({
  ...
  methods: {
    getUser(id) {
      const response = await this.$fetch.get(`users/${id}`);
      console.log(response);
    }
  },
  ...
});

Methods

• DELETE / GET / HEAD

this.$fetch.del(path);

this.$fetch.del(path, {
  id: '123'
});

this.$fetch.get(path);

this.$fetch.get(path, {
  id: '123'
});

this.$fetch.head(path);

this.$fetch.head(path, {
  id: '123'
});

• PATCH / POST / PUT

this.$fetch.patch(path, {
  name: 'Fred'
}, { id: 123 });

this.$fetch.post(path, {
  name: 'Fred'
});

this.$fetch.put(path, {
  name: 'Fred'
}, { id: 123 });

• FETCH

this.$fetch.fetch({
  url: 'http://localhost',
  path: '/users',
  query: { id: '123' },
  method: 'PUT',
  body: { name: 'Fred' },
  headers: {},
  timeout: 5000,
});

New Instance

const fetch2 = this.$fetch.create({
  url: '/',
  headers: {},
  logging: console.log,
  timeout: 5000,
});

const response = await fetch2.get(`users/${id}`);

Events

• before Called before starting the request.

this.$fetch.on("before", (request) => {
  console.log(request);
});

• complete Called when the request finishes

this.$fetch.on("complete", (response) => {
  console.log(response);
});

• error Called when the request fails

this.$fetch.on("error", (error) => {
  console.log(error);
});

Links

• Docs
• GitHub
• npm

License

• MIT License