jquery-resource
A jQuery plugin that abstracts the process of consuming a REST endpoint.
Features
⚡ Simple and lightweight
🚀 Incredible high availability
✨ Customizable ajax settings for resources
Table of Contents
jquery-resource
Features
Table of Contents
Installation
CDN
jsDelivr
unpkg
Usage
Methods
post()
get()
find()
patch()
put()
delete()
Aliases
add()
create()
update()
replace()
Custom actions
Last request
isPending()
Ajax settings
Resource’s ajax settings
Action’s ajax settings
One-time ajax settings
Inspiration
License
Installation
CDN
jquery-resource is available on jsDelivr or unpkg.
jsDelivr
Load jquery-resource from jsDelivr.
unpkg
Load jquery-resource from unpkg.
Usage
var userResource = $.resource({
endpoint: ‘https://reqres.in/api/users’
});
// POST /api/users
userResource.post({
email: ‘george.bluth@reqres.in’,
first_name: ‘George’,
last_name: ‘Bluth’
});
// GET /api/users/1
userResource.get(1);
// PATCH /api/users/1
userResource.patch(1, {
email: ’emma.wong@reqres.in’,
first_name: ‘Emma’,
last_name: ‘Wong’
});
// DELETE /api/users/1
userResource.delete(1);
Try it out on JSFiddle.
Methods
post()
var userResource = $.resource({
endpoint: ‘https://reqres.in/api/users’
});
// POST /api/users
userResource.post({
email: ‘george.bluth@reqres.in’,
first_name: ‘George’,
last_name: ‘Bluth’
}).done(function () {
console.log(‘POST /api/users’);
});
get()
var userResource = $.resource({
endpoint: ‘https://reqres.in/api/users’
});
// GET /api/users/1
userResource.get(1).done(function () {
console.log(‘GET /api/users/1’);
});
find()
var userResource = $.resource({
endpoint: ‘https://reqres.in/api/users’
});
// GET /api/users?first_name=George
userResource.find({
first_name: ‘George’
}).done(function () {
console.log(‘GET /api/users?first_name=George’);
});
patch()
var userResource = $.resource({
endpoint: ‘https://reqres.in/api/users’
});
// PATCH /api/users/1
userResource.patch(1, {
email: ’emma.wong@reqres.in’,
first_name: ‘Emma’,
last_name: ‘Wong’
}).done(function () {
console.log(‘PATCH /api/users/1’);
});
put()
var userResource = $.resource({
endpoint: ‘https://reqres.in/api/users’
});
// PUT /api/users/1
userResource.put(1, {
email: ’emma.wong@reqres.in’,
first_name: ‘Emma’,
last_name: ‘Wong’
}).done(function () {
console.log(‘PUT /api/users/1’);
});
delete()
var userResource = $.resource({
endpoint: ‘https://reqres.in/api/users’
});
// DELETE /api/users/1
userResource.delete(1).done(function () {
console.log(‘DELETE /api/users/1’);
});
Aliases
add()
Alias of post() method.
var userResource = $.resource({
endpoint: ‘https://reqres.in/api/users’
});
// POST /api/users
userResource.add({
email: ‘george.bluth@reqres.in’,
first_name: ‘George’,
last_name: ‘Bluth’
}).done(function () {
console.log(‘POST /api/users’);
});
create()
Alias of post() method.
var userResource = $.resource({
endpoint: ‘https://reqres.in/api/users’
});
// POST /api/users
userResource.create({
email: ‘george.bluth@reqres.in’,
first_name: ‘George’,
last_name: ‘Bluth’
}).done(function () {
console.log(‘POST /api/users’);
});
update()
Alias of patch() method.
var userResource = $.resource({
endpoint: ‘https://reqres.in/api/users’
});
// PATCH /api/users/1
userResource.update(1, {
email: ’emma.wong@reqres.in’,
first_name: ‘Emma’,
last_name: ‘Wong’
}).done(function () {
console.log(‘PATCH /api/users/1’);
});
replace()
Alias of put() method.
var userResource = $.resource({
endpoint: ‘https://reqres.in/api/users’
});
// PUT /api/users/1
userResource.replace(1, {
email: ’emma.wong@reqres.in’,
first_name: ‘Emma’,
last_name: ‘Wong’
}).done(function () {
console.log(‘PUT /api/users/1’);
});
Custom actions
var userResource = $.resource({
endpoint: ‘https://reqres.in/api/users’,
customActions: {
// actionName: ajaxSettings
save: {
method: ‘POST’,
url: ‘https://reqres.in/api/users/save’,
},
notify: {
method: ‘POST’,
url: ‘https://reqres.in/api/users/notify’,
// use resource id as an argument to action
useID: true,
},
},
});
// save(params, ajaxSettings)
userResource.save({
email: ‘george.bluth@reqres.in’,
first_name: ‘George’,
last_name: ‘Bluth’
});
// notify(id, params, ajaxSettings)
userResource.notify(1, {
message: ‘some message’
});
Last request
var userResource = $.resource({
endpoint: ‘https://reqres.in/api/users’,
});
userResource.get(1);
userResource.get(2);
// action’s last request
userResource.get.lastRequest.done(function () {
console.log(‘GET /api/users/2’);
});
isPending()
var userResource = $.resource({
endpoint: ‘https://reqres.in/api/users’,
});
userResource.get(1);
// check if the last request is pending
console.log(userResource.get.isPending());
Ajax settings
jQuery.ajax(settings)
Resource’s ajax settings
var userResource = $.resource({
endpoint: ‘https://reqres.in/api/users’,
// use resource’s ajax settings to actions
ajaxSettings: {
contentType: false,
processData: false
},
});
userResource.get(1);
// change resource ajax settings
userResource.ajaxSettings.processData = true;
Action’s ajax settings
var userResource = $.resource({
endpoint: ‘https://reqres.in/api/users’,
});
// action’s ajax settings
userResource.post.ajaxSettings.processData = false;
userResource.post({
email: ’emma.wong@reqres.in’,
first_name: ‘Emma’,
last_name: ‘Wong’
});
One-time ajax settings
var userResource = $.resource({
endpoint: ‘https://reqres.in/api/users’,
ajaxSettings: {
dataType: ‘text’
},
});
// use one-time ajax settings to post
userResource.post({
email: ’emma.wong@reqres.in’,
first_name: ‘Emma’,
last_name: ‘Wong’
}, {
dataType: ‘json’
});
// use one-time ajax settings to actions:
// – post(data, ajaxSettings)
// – find(params, ajaxSettings)
// – patch(id, data, ajaxSettings)
// – put(id, data, ajaxSettings)
// – get(id, params, ajaxSettings)
// – delete(id, params, ajaxSettings)
Inspiration
pagekit/vue-resource
Vue.resource
ngonzalvez/rest-facade
License
MIT