bower:
// 尚未上传至bower
bower install resourcenpm:
// 尚未上传至npm
bower install resourceimport $resource from 'resource';
// or
var $resource = require('resource');整包输出$resource对象
分别以3中情况输出
-
AngularJs
自动生成一个$resource模块，里面有$resource服务
-
$resourceProvider
-
.setResponseType(type)
设置响应类型
-
.setHeaders(headers)
设置全局的请求头
-
.setWithCredentials(boolean)
设置是否跨域
-
.setHosts(hosts)
设置API地址
-
.setInterceptor(func)
设置响应拦截器
-
.setTransformHeaders(func)
设置默认的请求头转换器
-
-
$resource
$resource服务就是$resource
-
-
jQuery
挂载到 $.fn.$resource 下
-
window
以上两个条件都不满足，则挂载在全局作用于下
设置响应类型，默认为:'',比如设置为json
$resource.responseType='json';可选的responseType
- ''
- 'text'
- 'arraybuffer'
- 'blob'
- 'document'
- 'json'
设置全局的请求头，默认值:{Accept: 'application/json, text/plain, text/html, */*'}
$resource.headers = {
admin:true
}设置是否跨域，默认值：false
$resource.withCredentials = true;设置接口的hosts地址，默认值：window.location.host
$resource.hosts = 'localhost:8080';设置对response的拦截器
-
response，不是纯粹的response，而是经过包装之后。结果与ngResource包装的基本一致
-
$q，promise的Q库
-
return
- promise
- 如果promise为
reject，则调用的then为reject，resolve也一样 - 如果带data
$q.resolve(data)，则最后调用的结果就是data
- 如果promise为
- boolean
- 如果为true，则视为
resolve，为false视为reject - data默认为response
return false等效于return $q.reject(response)return true等效于return $q.resolve(response)
- 如果为true，则视为
- any
- 结果既不是promise，也不是boolean
- 一律视为
reject，reject的data则为返回的值 return undefined等效于return $q.reject(undefined)
- promise
/**
* 默认拦截器
* @param response
* @param $q
* @returns {* | boolean | promise}
*/
$resource.interceptor = function(response, $q){
if (!response || response.status >= 400 || !response.data) {
return $q.reject();
} else {
return $q.resolve();
}
}对请求头的转换器
这个是全局的，意味着，发出的每一个请求，含有头部信息，都会经过这个列表的函数变形
默认为空数组:[]
/**
* 对请求头的数据，进行转换
* @param headers 请求头
* @returns {*} 可以返回任意值，返回的值会经过下一轮的转换器转换，最后输出最终值
*/
var transform = function(headers){
// 给所有 headers 添加 test = 'test'
headers.test = 'test';
return headers
}
$resource.transformHeaders.push(transform)$resource.q
返回通过$resource.register(id,url,params,actions,options)注册的api
$resource.$q
返回 Q库
用于操作promise
$resource.$utils
内部的工具集合
var $utils = $resource.$utils;
console.log($utils);
{
noop,
isDefined,
isUndefined,
isArray,
isDate,
isBoolean,
isElement,
isNumber,
isObject,
isString,
isFunction,
isRegExp,
isWindow,
isFile,
isBlob,
isTypedArray,
isArrayBuffer,
equals,
merge,
extend,
copy,
forEach,
fromJson,
toJson
}$resource.register(id,url,params,actions,options)
注册api，对$resource的一层包装
-
id:string- 必填，注册api的唯一标识符
-
url:string- 必填，api的url地址，为相对地址，比如
'/:path/:file.json'
- 必填，api的url地址，为相对地址，比如
-
params:object- 绑定url中的通配符至传入到调用方法的params
-
actions:object- 自定义方法
{action1: {method:?, params:?, isArray:?, headers:?, ...}, action2: {method:?, params:?, isArray:?, headers:?, ...}, ...}- 默认的actions
var defaultActions = { get: {method: 'GET'}, query: {method: 'GET'}, post: {method: 'POST'}, save: {method: 'POST'}, create: {method: 'POST'}, put: {method: 'PUT'}, update: {method: 'PUT'}, fetch: {method: 'GET'}, delete: {method: 'DELETE'}, remove: {method: 'DELETE'}, options: {method: 'OPTIONS'}, head: {method: 'HEAD'}, patch: {method: 'PATCH'}, trace: {method: 'TRACE'}, connect: {method: 'CONNECT'}, move: {method: 'MOVE'}, copy: {method: 'COPY'}, link: {method: 'LINK'}, unlink: {method: 'UNLINK'}, wrapped: {method: 'WRAPPED'}, 'extension-mothed': {method: 'Extension-mothed'} }
-
options:object自定义配置，通过该api注册的所有方法，都通过这个配置，优先级低于actions
-
headers:object- 设置请求头
-
interceptor:function- 设置拦截器，通过这个api的方法，都使用这个拦截器
-
withCredentials：boolean- 设置是否跨域
-
transformHeaders:array对请求头进行变形，详情参考transformHeaders
设置了该参数，不会覆盖全局的
$resource.transformHeaders，而是依次变形，得到最终结果
-
-
return：返回一个new $resource(url,params,actions,options)
new $resource(url,params,actions,options)
生成一个$resource实例
-
url:与$resource.register一致
-
params：与$resource.register一致
-
actions：与$resource.register一致
-
options：与$resource.register一致
-
return
返回一个内部的Http对象
$resource的实例为一个内部的Http对象
该Http对象的原型(prototype)包含了所有actions的方法，包括默认actions和自定义actions
例如
new $resource(url,params,actions,options).get().$promise.then();
例如
new $resource(url,params,actions,options).post().$promise.then();
例如
new $resource(url,params,actions,options).put().$promise.then();
-
action 方法，如get，post，put...
-
params 参数，用于解析url地址，如果为post,put等方法，则会作为requestBody随着请求发送服务器
例如： url:'/user/:uid'
params:{uid:'testUser'}
则会把地址解析成
'/user/testUser' -
config 配置项，与 $resource(url,params,actions,options) 中的 options一致
配置了该属性，会覆盖
全局设置和$resource的options中的设置属于临时配置项，临时配置当前调用的方法
transformHeaders 详情参考transformHeaders 设置了该参数，不会覆盖全局的
$resource.transformHeaders和$resource的options设置的变形器，而是依次变形，得到最终结果
$resource的底层方法，每个$resource实例，都会调用$http
$resource.$http(config);
- config
- url
- method
- headers
- withCredentials
- data
- interceptor
- timeout(尚未实现)
- eventHandlers
- cache
- responseType
- return
- response.resource
- $promise
- $resolve
- ...(response.data)
- response.resource
var userApi = new $resource('/user/:uid',{uid:'@uid'});
userApi.get({user:'testUser'}).$promise
.then(function(response){
console.log(response);
},function(response){
console.error(response);
});response
- $$XHR：XMLHttpRequest
- config
- cache:boolean|number,是否缓存，为数字时，表示缓存次数
- data:any,requestBody的数据
- headers:object，请求头
- method:string，请求方法
- responseType:string，响应类型
- url:string，请求的url地址
- withCredentials:boolean，是否跨域
- data:any，真正的后台返回的数据
- headers:object
- resource
- $promise:promise
- $resolve:boolean
- ...(response.data)
- status:number，状态码
- statusText:string，状态提示文本
var getJson = $resource.register('getJson','/data/:file.json');
getJson.get({file:'demo'}).$promise
.then(function(resp){
var json = resp.data;
console.log(json);
},function(error){
console.log(error);
});通过new $resource()的方法
var getJson = new $resource('/data/:file.json');
getJson.get({file:'demo'}).$promise
.then(function(resp){
var json = resp.data;
console.log(json);
},function(error){
console.log(error);
});var getUser = $resource.register('userApi','/user/:uid');
getUser.get({uid:'testUser'}).$promise
.then(function(resp){
console.log(resp);
},function(error){
console.error(error);
});var getUser = $resource.register('userApi','/user/:uid',{uid:'@uid'},{},{
headers:{
auth:'test'
}
});
getUser.get({uid:'1'}).$promise
.then(function(resp){
console.log(resp);
},function(error){
console.error(error);
});通过getUser调用的所有方法，请求头都会加上{auth:'test'},比如
getUser.get();
getUser.post();
getUser.put();
...var getUser = $resource.register('userApi','/user/:uid',{uid:'@uid'},{
// 自定义的actions
info:{
method:'GET',
headers:{
auth:'test'
}
}
});
// info方法，会添加请求头{auth:'test'}
getUser.info({uid:'1'}).$promise
.then(function(resp){
console.log(resp);
},function(error){
console.error(error);
});// 设置缓存次10次
var getUser = $resource.register('userApi','/user/:uid',{uid:'@uid'},{},{
cache:10
});
// 10次之后的请求，都会被缓存，直到超过缓存次数
getUser.get().$promise
getUser.post().$promise
getUser.put().$promisegit clone https://github.com/suboat/resource.git
cd resource
npm install
npm run buildnpm test