几天前，我有同样的需求，下面是我为同样的模块创建的代码......
'use strict';
(function() {
angular.module('httpService', []).service("api", ["$http", "dbService", function($http, dbService) {
/**
* <Pankaj Badukale>
* ()
* request.url => Url to request
* request.method => request method
* request.data => request data
* request.mask => This is custom object for out use
*
* @return ()
*/
return function (request) {
var url = (request != undefined && request.url != undefined) ? request.url : "./";
var method = (request != undefined && request.method != undefined) ? request.method : "GET";
var rData = (request != undefined && request.data != undefined) ? request.data : {};
/**
* mask is CUSTOME object we add to request object
* Which is useful for keep track of each request as well interceptor execute
*
* IT HAS
* {
* save : true, //tell that save request response in session
* fetch : true, //check local data first,
* fetchSource : tell about perticular source of data DEFAULT WILL BE sessionStorage
* OPTIONS are session and local
* } strucutre FOR NOW may be it will better or enhance in future
*
* message property to set message in alert
* doExecute tell wheather you want to execute maskMan code for this request
*
* while saving and fetching data from local it uses URL of request as key
* maskMan is a factory which iterate your error response object and we can add different behaviours for maskMan
*/
var mask = {};
if(request != undefined && request.mask != undefined) {
mask = request.mask;
}
return dbService.http(request).then(function(data) {
console.log("Data fetched from local "+ request.url);
return data;
}, function(err) {
return $http({
url: url,
method: method,
data: rData,
mask: mask,
header:{
'content-type':'application/json'
}
}).then(function(response) {
return response.data;
},function(error) {
return error;
});
});
};
}]).service('customHttpInterceptor', ["$q", "maskMan", function($q, maskMan) {
return {
//before send request to server
request: function(config) {
return config;
},
//if any found in request object
requestError: function(rejection) {
return $q.reject(rejection);
},
//on response come to web app
response: function(response) {
maskMan.responseIterator(response);
//you to return any thing as response from here
return response;
},
//if there is error in response`
responseError: function(rejection) {
maskMan.statusIterator(rejection);
return $q.reject(rejection);
}
};
}]).factory("maskMan", ["dbService", function(dbService) {
return {
/**
* statusIterator
* Iterate response object on error comes
*/
statusIterator: function(rejection) {
if( rejection.config.mask.doExecute == true) {
switch(rejection.status) {
case 404: this.notFound(rejection);
break;
default: this.dontKnow(rejection);
}
}
},
/**
* notFound
* Function to defined logic for 404 error code scenario's
* Here we can defined generic as well specific request object conditions also
*/
notFound: function(rejection) {
var errMsg = rejection.config.mask.message || "Something wrong";
alert(errMsg);
rejection.stopExecute = true;//stop further execute of code flag
},
/**
* dontKnow
* For every error response this method goingt to envoke by default
*/
dontKnow: function(maskObject) {
console.log("Don't know what to do for "+maskObject.config.url);
},
/**
* responseIterator
* Define logic to do after response come to browser
*
* @params JSON resp
*/
responseIterator: function(resp) {
//Logic to save data of response in session storage with mask command save
if( resp.config.mask !== undefined && resp.config.mask.save === true ) {
var sdata = JSON.stringify(resp.data);
var skey = resp.config.url;
dbService.sinsert(skey, sdata);
}//END
}
};
}]).service("dbService", ["$q", function($q) {
/**
* http
* Custom mirror promise to handle local storage options with http
*
* @params JSON request
*/
this.http = function(request) {
var self = this;
return $q(function(resolve, reject) {
if( request.mask != undefined && request.mask.fetch === true ) {
var data = null;
if( request.mask.fetchSource == undefined || request.mask.fetchSource == "session") {//go for default sessionStorage
data = JSON.parse(self.sget(request.url));
} else if( request.mask.fetchSource == "local" ) {
data = JSON.parse(self.get(request.url));
} else {
reject( "Fetch source is not defined." );
}
if( data != undefined && data != null ) {
resolve(data);
} else {
reject("Data not saved in local "+request.url);
}
} else {
reject("Data not saved in local "+request.url);
}
});
}
/**
* Add/Override data to local storage
*
* @params String key
* @params Array/Json data
* @params Function callback
*
* @return Boolean/Function
*/
this.insert = function(key, data, callback) {
localStorage.setItem(key, data);
if( callback != undefined ) {
callback();
} else {
return true;
}
}
/**
* Update data of local storage
* This function generally used to data which is already exist and need to update
*
* @params String key
* @params Array/Json data
* @params Function callback
*
* @return Boolean/Function
*/
this.update = function(key, data, callback) {
var self = this;
self.view(key, function(localData) {//callback function
if( localData != undefined && localData != null ) {
//already some data exist on this key So need to update it
data = localData.push(data);
}
//just handover to insert
if( callback !== undefined ) {
self.insert(key, data, callback);
} else {
return self.insert(key, data);
}
});
}
/**
* Remove data from local storage on basis of key
*
* @params String key
* @return Boolean
*/
this.remove = function(key, callback) {
localStorage.removeItem(key);
if( callback !== undefined ) {
callback();
} else {
return true;
}
}
/**
* Get key data of local storage
* @param String key
*
* @return Array data WHEN all data OR
* @return String data WHEN key value
*/
this.get = function(key, callback) {
var key = key || "";
var data = [];
if( key == "" ) {
//get all data
for(var i in localStorage) {
data.push(JSON.parse(localStorage[i]));
}
} else {
//get one key data
data = localStorage.getItem(key);
}
if(callback != undefined) {
callback(data);
} else {
return data;
}
}
/**
* sinsert
* Add/Override data to session storage
*
* @params String key
* @params Array/Json data
* @params Function callback
*
* @return Boolean/Function
*/
this.sinsert = function(key, data, callback) {
var key = this.encode(key);
sessionStorage.setItem(key, data);
if( callback != undefined ) {
callback();
} else {
return true;
}
}
/**
* supdate
* Update data of session storage
* This function generally used to data which is already exist and need to update
*
* @params String key
* @params Array/Json data
* @params Function callback
*
* @return Boolean/Function
*/
this.supdate = function(key, data, callback) {
var self = this;
self.view(key, function(localData) {//callback function
if( localData != undefined && localData != null ) {
//already some data exist on this key So need to update it
data = localData.push(data);
}
//just handover to insert
if( callback !== undefined ) {
self.insert(key, data, callback);
} else {
return self.insert(key, data);
}
});
}
/**
* sremove
* Remove data from session storage on basis of key
*
* @params String key
* @return Boolean
*/
this.sremove = function(key, callback) {
var key = this.encode(key);
sessionStorage.removeItem(key);
if( callback !== undefined ) {
callback();
} else {
return true;
}
}
/**
* get
* Get key data of session storage
* @param String key
*
* @return Array data WHEN all data OR
* @return String data WHEN key value
*/
this.sget = function(key, callback) {
var key = key || "";
var data = [];
if( key == "" ) {
//get all data
for(var i in sessionStorage) {
data.push(JSON.parse(sessionStorage[i]));
}
} else {
//get one key data
key = this.encode(key);
data = sessionStorage.getItem(key);
}
if(callback != undefined) {
callback(data);
} else {
return data;
}
}
/**
* encode
* encode give string using javascript
*
* @param String str
* @return String
*/
this.encode = function(str) {
return btoa(str);
}
/**
* decode
* decode give string using javascript
*
* @param String str
* @return String
*/
this.decode = function(str) {
return atob(str);
}
return this;
}]).config(['$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push('customHttpInterceptor');
}]);
})();
如何使用它::
在你的项目中包含这个模块......
然后对所有用于 API 调用的 http 请求始终使用“httpService”...
我们需要将配置对象传递给该服务，告知 API 调用以及应该如何处理它......您可以在代码本身中找到有关配置的详细信息......
那么如何在控制器中使用..
module.controller('nameofController', ['httpService', function(httpService) {
httpService({
url: 'Your API url',
method: 'GET',
mask: {
save : true, //tell that save request response in session
fetch : true, //check local data first before next fetch,
fetchSource : tell about perticular source of data DEFAULT WILL BE sessionStorage OPTIONS are session and local
}
}).then(function(data) {
// promise is all same as $http
console.log(data);
});
}]);
希望这会有所帮助...您也可以使用非常简单的解决方案来标记
{cache: true}
...
但是这个解决方案是完全定制的并且在所有的控制之下
生产中使用的原始代码在gist