V-Model
V-Model is a model plugin for Vue.js, like ng-resource. based on axios, path-to-regexp, and bluebird.
The V-Model provides interaction support with RESTful services, can work with Vue.js 1.x and 2.x.
See more about ng-resource
Installation
> npm i -S v-model
; // set baseURLModelhttpdefaultsbaseURL = '//api.laoshu133.com'; // installVue;
Usage
;; // set baseURLModelhttpdefaultsbaseURL = '//api.laoshu133.com'; // install pluginVue; const PostModel = Model; const app = el: '#app' data: post: status: PostModelEDITING content: '' title: '' methods: { thispost = PostModel; return thispost$promise; } { return thispost; } ;
Model Factory
Before you can create model(s), you need to generate a Model.
Model;
url
An Express-style path string, e.g /posts/:id
.
actions
Hash with declaration of custom actions.
{
action1: {method:?, params:?, isArray:?, headers:?, ...},
action2: {method:?, params:?, isArray:?, hasPagination:?, ...}
}
Default actions:
{
get: { method: 'GET' },
save: { method: 'POST' },
update: { method: 'PUT' },
delete: { method: 'DELETE' },
query: { method: 'GET', isArray:true }
};
Where:
action
{String} The name of action.method
{String} Case insensitive HTTP method (e.g. GET, POST, PUT, DELETE, JSONP, etc).params
{Object} Optional set of pre-bound parameters for this action.headers
{Object} Optional set of pre-bound request headers for this action.timeout
{Number} timeout in milliseconds.isArray
{Boolean} If true then the returned object for this action is an array.hasPagination
{Boolean} Only work withisArray: true
, if true then tranform the request result to{items: requestResult, pagination: {num: ?, size: ?, total: ?}}
staticProps
Hash with declaration of static properties.
Model.extend('/posts/:id', null, {
EDITING: 0,
PUBLISHED: 1
});
options
Set http request default settings for.
Where:
baseURL
will be prepended tourl
unlessurl
is absolute.headers
are custom headers to be sent
See more axios config
API
With static method:
// get single postconst post = PostModel; // get post listconst posts = PostModel; // updateconst post = PostModel; // deletePostModel;
With instance method:
// create/savelet post = ;let promise = post // updatelet post = id: 1 title: 'Post title';let promise = post;
Pagination
V-Model support pagination via reponse headers X-Pagination
.
Some http request:
> GET /posts?page_num=1&page_size=20 HTTP/1.1
> Host: api.laoshu133.com
> User-Agent: curl/7.49.1
>
< HTTP/1.1 200 OK
< Content-Type: application/json; charset=utf-8
< X-Pagination: {"num":1,"size":20,"total":44}
[{"id":1,"title":"Post title","content":"content..."}]
Usage:
const PostModel = Model; let postsData = PostModel; postsData$promise;
Cancellation
Sometimes we need to abort the request, such as quick switch page number.
Usage:
;; // enable bluebird cancellationPromise; const PostModel = Model; { return query: page_num: 1 itemsData: pagination: num: 1 size: 20 total: 0 items: } methods: { // Cancel the last request // If it has not responded yet let promise = thisitemsData$promise; ifpromise promise; // make a new request thisitemsData = PostModel; } watch: { this; } { this; };
$resolved flag
The V-Model instance/result has a $resolved
flag.
Can be used for loading status.
Usage:
Loading... {{item.id}} ...
Interceptors
You can intercept requests or responses.
// global interceptor
const http = PostModel.http;
// request
http.interceptors.request.use(beforeSend, requestError);
// response
http.interceptors.response.use(afterSend, responseError);
See more axios Interceptors
Running tests
> npm test
License
MIT