1.0.3 • Published 7 years ago
vue-rest-resource v1.0.3
vue-rest-resource
A base class for accessing REST APIs in object-oriented way. Backed by axios.
Installation
Add package
yarn add vue-rest-resourceUsage
Import Resource class and instantiate with endpoint URL:
import Resource from 'vue-rest-resource';
const usersResource = new Resource('/api/users');
// use any of provided methods:
const user = await usersResource.get(1);
// create user
await usersResource.create(userData);
// update user
await usersResource.partialUpdate(userId, userData);Global settings
You may set global options to Resource class:
Change axios client instance
by default, Resource class creates a new instance of axios. You still able to override it by:
import Resource from 'vue-rest-resource';
import axios from 'axios';
const myAxios = axios.create();
Resource.client = myAxios;Force trailing slash
some framworks (eg. Django) may require a trailing slash for requests.
appendSlash setting ensures this rule.
import Resource from 'vue-rest-resource';
import axios from 'axios';
Resource.appendSlash = true;Override global setting instance
const resource = new Resource('/api');
resource.withClient(myAxios);
resource.withAppendSlash(false);
resource.create();latter calls localhost:8000/api using myAxios client.
Extend with own methods
Extend class and implement your own custom actions:
class UsersResource extends Resource {
async setActive(userId, flag) {
const url = this.url(userId);
return this.update(url, {isActive: flag})
}
async setStatus(userId, status) {
// access underlying client API
const url = this.url(userId);
return Resource.client.post(url, status)
}
}
// instantiate and use
const users = new UsersResource('/api/users');
users.setActive(100, true)Helper methods
Make an URL with url(...args): string
Use Resource.url functions to build an URL:
// in some resource class method
// assuming: appendSlash = true, userId = 10
this.url(['users', userId, 'create'])
// /users/10/create/Class method to REST action map
| Method | REST | |
|---|---|---|
| get(objectId) | GET | |
| list() | GET | |
| create(data) | POST | |
| delete(objectId) | DELETE | |
| update(objectId, data) | PUT | |
| partialUpdate(objectId, data) | PATCH | |
| createOrUpdate(objectId, data) | PUT or POST | If id in data, calls update otherwise `create |
| createOrPartialUpdate(objectId, data) | PATCH or POST | If id in data, calls partialUpdate otherwise `create |