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