JavaScript Fetch API

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

Promises 🤞

Text

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

Source: Sandra Larsson

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.

  • 59

More from sandra-larsson