Javascript Fetch API Primer Tutorial

Javascript Fetch API Primer Tutorial

More and more, around here, recently, constructing web applications using PHP/HTML/Javascript we have added to a list of “URL response tools”, adding to an “off the top of our head” list of (just the HTML and Javascript “client side”) navigational ideas …

• location.href='[URL]’; #same webpage, but reload, perhaps with different content
• document.location.reload(); #same webpage, same initial content, cache may come into play
• Refresh (eg. every 5 seconds) via head element subelement like <meta http-equiv=”refresh” content=”5″> #same webpage, same initial content, cache may come into play
• window.open(‘[URL]’,’_blank’); #new webpage
• window.open(‘[URL]’,’_self’); #same webpage, perhaps with different content
• HTML form action='[URL]’ target=_blank #new webpage
• HTML form action='[URL]’ target=_self #same webpage, but reload, perhaps with different content
• location.hash=’#[stuff]’; #same webpage, no reload, detect, analyze and act on [stuff]
• location.href=’#[stuff]’; #same webpage, no reload, detect, analyze and act on [stuff]
• Ajax open then send([perhaps FormData object]); #same webpage, extract content … we’ve recently started using another way to extract information but stay on the same webpage as …
• Fetch API Javascript “fetch” command #same webpage, extract content

… we’ve used to, so far …

• derive “one run through” duration of Animated GIF URL in variable “whatgifmaybe” …
  
fetch(whatgifmaybe.replace('http:','').replace('https:',''))
.then(res => res.arrayBuffer())
.then(ab => isGifAnimated(new Uint8Array(ab)))
.then(console.log);
}

• derive content of URL (which returns JSON array list of image URLs) …
  
// Thanks to
const res = await fetch("./index.php?diris=images&prefixis=DSC_0&startsuffix=279&endsuffix=364", {/* options here */});
const data = await res.json();

for (var inm=0; inm&t;data.length; inm++) {
image_list[image_index++] = new imageItem(data[inm]);
console.log('Added ' + data[inm]);
}

console.log(data);
console.log("Some code after that uses data");

})();


If this was interesting you may be interested in this too.