JavaScript Fetch API

Webbserverprogrammering 1

Hämta data över HTTP med fetch

Använda Promises och Async/Await istället för Callbacks för asynkron hantering.

AJAX

Asynchronous JavaScript And XML

JSON

Historia: Webb 2.0 och Rich Internet Applications och kom på 2000-talet

let ajax = new XMLHttpRequest();
ajax.open('get', url);
ajax.onreadystatechange = function() {
    if(ajax.status == 200 && ajax.readyState == 4) {
        console.log('Result: ' + ajax.responseText);
    }
}
ajax.send();

AJAX-anrop

Fetch API

  • Används för att hämta data över HTTP. Som AJAX men baserat på promises
  • Finns inbyggt i Javascript motorn (WEB API). Inget externt ramverk
  • Finns även andra motsvarigheter i form externa ramverka, exempelvis axios och superagent
  1. callbacks
  2. promises
  3. async functions

Asynkron hantering

Till vår räddning 🤩

Kan ff användas i mindre omfattning...

Promises 🤞

Tänk att du är ett barn och du vill ha ett riktigt coolt lego. Du vet inte om du kommer få det eller när.

Din mamma kan antingen

 

Köpa det riktigt coola legot till dig då hon är glad 💁‍♀️

eller

inte köpa det riktigt coola legot då hon inte är glad 🧟‍♀️

 

Detta är en promise! 🤞

Promise 🤞

  • Skapar ett löfte
  • Infrias / ej infrias
  • Resolved - Din mamma köpte lego till dig
  • Rejected - Din mamma köpte inte lego till dig
  • Pending - Du vet ännu inte om din mamma köpt lego eller inte

Promise 🤞 

 let momIsHappy = false;

 function tryPromise(momIsHappy) { 
	return new Promise(function(resolve, reject) {
        if(momIsHappy) {
            resolve('Lego köpt!');
        } else {
            reject('No lego for you!');
        }
    });
 }

 tryPromise(momIsHappy).then(function(data) { 
    console.log(data); 
 }).catch(function(err) {
    console.log(err);
 });

Alla Promises har then() som är det som blir resolved och catch() för det som är rejected

Använda Fetch och Promises

fetch(url) // Funktionen fetch körs direkt
.then(function(response) {
    // Den här koden körs när servern svarar
    // ett promise, gör om svaret till ett objekt
    return response.json();
})
.then(function(data) {  
    // Returen från förra skickas in som objekt
    // Skriver ut vår data 
    console.log(data);
}).catch(function(error) {
    // Denna kod körs om det blir fel exempelvis 
    // att servern inte svarar
    console.error(error); 
});

// Koden här kommer att köras direkt efter fetch
// och innan servern hinner svara

Nu är legot ett spännande svar från ett API!

Async/Await!

async function getData() {

   let response = await fetch(url);
   // Väntar på svar från server och 
   // lägger datat i json-format
   let data = await response.json();
   // Väntar på att json-datat görs 
   // om till ett objekt
   console.log(data); // Skriver ut vårt data
}

getData();

Async/Await-metoden har ingen annan funktionalitet än Promises med .then(), ger bara "renare" kod!

Vi kommer använda denna metod!

Async/Await!

async function getData() {

 try { //Om promise inte blir "resolved" => gå till catch
 
   let response = await fetch(url);
   // Väntar på svar från server och 
   // lägger datat i json-format
   let data = await response.json();
   // Väntar på att json-datat görs 
   // om till ett objekt
   console.log(data); // Skriver ut vårt data
   
   } catch(err) { // promise "rejected"
     console.log(err);
   }
   
}

getData();

try/catch tillhör normal felhantering i JS. Här fångas en "rejected" Promise upp i catch

hantera resolved + reject med async funktion

Async/Await!

async function getData() {

 try { // Om ej lyckas, d.v.s ingen 
       // promise resolved => gå till catch
   let response = await fetch(url);
   // Väntar på svar från server och 
   // lägger datat i json-format
   let data = await response.json();
   // Väntar på att json-datat görs 
   // om till ett objekt
   console.log(data); // Skriver ut vårt data
   } catch(err) { // promise rejected
     console.log(err);
   }
   return data;
}

async otherFunc(){
let data = await getData();
console.log(data);
}

Det som returneras från en async funktion är också ett promise och måste hanteras som det!

returnera från en async funktion

Non-blocking! Testa!

async function getData() {

 try { 
   let response = await fetch(url);
   let data = await response.json();t
   console.log(data); 
   } catch(err) { 
     console.log(err);
   }
  
}

console.log(1);
console.log(2);

getData();

console.log(3);
console.log(4);

CORS 🤔

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Detta kan uppstå som problem när du försöker hämta data från API

En lösning: Använda en proxy-server. Ex denna https://corsproxy.github.io/

Jag vill veta mer

Obs! I dessa videos används ES 6 Arrow functions

Använda Javascript Fetch API för att hämta data

By Sandra Larsson

Made with Slides.com

Använda Javascript Fetch API för att hämta data

Hur man hämtar data över HTTP med Fetch API samt hur man använder Promises samt Async/Await istället för callback för asynkron hantering.

  • 226

More from Sandra Larsson