Categories
Plugins

jquery-resource

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

GitHub Repo