Giacomo Balli profile picture

Giacomo Balli

Innovation consultant specializing in mobile strategy

Let's Chat

Cache API Calls


This code sample will allow you to cache API calls for a super fast UX.



function makeApiCall(url, cbk, apiCallneedsRefresh, args) {
if (localStorage.getItem("apiResp-" + url) && !apiCallneedsRefresh && (!args || JSON.stringify(args) == "{}")) {
console.log("Will use cached " + url + " API response.");
var resp = JSON.parse(localStorage.getItem("apiResp-" + url));
cbk(resp);
return;
}
var req = new XMLHttpRequest();
if (args) {
req.args = args;
req.open("POST", url, true);
//req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.setRequestHeader("Content-type", "application/json");
} else {
req.open("GET", url, true);
}
req.url = url;
req.onerror = function (e) {
var errMsg="";
if (e.position === 0 && e.totalSize === 0) {
errMsg="No connection ☹";
} else {
errMsg="API Error

" + JSON.stringify(e) + "
" + req.status + " - " + req.statusText;
}
alert(errMsg);
console.log("API Error
" + JSON.stringify(e));
};
req.onload = function (evt) {
if (req.status === 404) {
alert("Whoops, something went wrong.
Resource not found.");
return;
} else if (req.status === 401) {
alert("Unauthorized.");
return;
} else if (req.status === 500) {
alert("Currently unavailable: server error");
return;
}
var resp = JSON.parse(evt.target.responseText);
cbk(resp);
if (!args) {
localStorage.setItem("apiResp-" + url, evt.target.responseText);
console.log("Api call to " + url + " cached.", resp);
} else {
console.log("Api call to " + url + " completed.", args, resp);
}
};
req.send(JSON.stringify(args));
}

Directions:

- url is the full url you want to retrieve.

- cbk is the callback function to be executed when a response is received.

- apiCallneedsRefresh is a boolean variable to force a fresh call.

- args is a JSON object to be POSTed.

- sample usage: makeApiCall("http://google.com/API/search", function(r){console.log(r);}, true, {name:"John",last_name:"Doe"});


Note:
This snippet focuses on iOS development. Make sure to verify/adapt any vendor prefixes.

Back to main listing.

Published: Mon, 11 Jan 2016 02:23:03 +0000