fetch
I alle eksemplene nedenfor bruker vi to enkle funksjoner for å plassere teksten vi henter eller meldinger på websiden:
function showLines(lines,resultID){
var elt=document.getElementById(resultID);
elt.innerHTML="";
for(var i=0;i< lines.length;i++)
elt.innerHTML+=lines[i]+"<br/>";
}
function clearLines(resultID){
elt=document.getElementById(resultID).innerHTML="";
}
I alle eksemplene nedenfor er den høyre knappen for demonstrasjonens skyld et forsøk på å laste en fil som ikke finnes.
Eksemplel 0
Dette er et minimalistisk eksempel på bruk av fetch. Vi henter ikke teksten, vi undersøker bare om vi finner den.
Koden er slik:
function getData10(adr){
clearLines("result0");
fetch(adr, {cache: "no-cache"})
.then(function(response) {
showLines([response.statusText,response.status],"result0")
})
}
Eksempel 1
Her er vi også bare interessert i å finne ut om vi finner fila. Vi sender melding vår tilbake og får svar i neste forekomst av then.
Koden er slik:
function getData11(adr){
clearLines("result1");
fetch(adr, {cache: "no-cache"})
.then(function(response) {
return response.status+'\n'+response.statusText;
})
.then(function(myText) {
showLines(myText.split('\n'),"result1");
})
}
Merk at den teksten vi ber om i den første then forekomsten er status på vårt forsøk. Vi returnerer denne statusen og får den tilbake i neste runde, neste then. Første da sender vi den til utskrift.
Eksempel 2
Her henter og bruker vi teksten hvis vi finner den.
Koden er slik:
function getData12(adr){
clearLines("result2");
fetch(adr, {cache: "no-cache"})
.then(function(response) {
if (response.ok)
return response.text();
else
return response.status+'\n'+response.statusText;
})
.then(function(myText) {
showLines(myText.split('\n'),"result2");
})
}
Eksempel 3
Her henter og bruker vi teksten hvis vi finner den. Vi bruker en exception for å forberede feilmelding.
Koden er slik:
function getData13(adr){
clearLines("result3");
fetch(adr, {cache: "no-cache"})
.then(function(response) {
if (response.ok)
return response.text();
throw(response.statusText);
})
.then(function(myText) {
showLines(myText.split('\n'),"result3");
})
.catch(function(err) {
showLines([err,adr,"er ikke lastet"],"result3");
});
}
