JS 1.6 HTTP-requests

Table of contents

• Fetch API
• HTTP request metoder
  • GET
  • POST
  • PUT
  • DELETE
  • Fler exempel med fetch
• Mer läsning
• Referenser

HTTP är ett protokoll för att hämta resurser/dokument. Det är ett så kallad client-server protocol, vilket innebär att förfrågan att hämta skickas från mottagaren/klienten (browsern här). Ett hämtat dokument består ofast av en mängd olika dokument och resurser, som text, bilder, videos, scripts etc. ¹

Fetch API

Fetch är ett web-API som kan användas för asynkrona HTTP-requests. Returnerar ett promise.

Fetch fungerar väldigt bra med service workers (mer om det här). Hanterar errors bättre än jQuery.ajax(), om en sida ligger nere så kommer promiset från fetch att resolva som vanligt när sidan är uppe igen, utan att automatiskt skicka cross-origin cookies i CORS.

Exempel

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

När ett promise från fetch() resolvas så returneras ett Response-objekt. Vanliga properties på response-objektet:

• response.status - Integer med svars statuskoden (default 200)
• response.statusText - Sträng som motsvarar statuskod meddelandet
• response.ok- Shorthand för att kolla om statuskoden är ok (200-299), returnerar en boolean

För att kolla att fetchen var lyckad så kollas först att promiset resolvats, och sen att propertyn Response.ok är true.

Exempel

fetch('flowers.jpg')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.blob();
  })
  .then(myBlob => {
    myImage.src = URL.createObjectURL(myBlob);
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

HTTP request metoder

Det finns flera olika metoder för att skicka requests. Nedan är några av de vanligaste. ²

GET

Skickas ofta via URL:en. Bör bara användas för att hämta data, aldrig skicka data, då parametrarna syns i URL:en.

Exempel

function getList() {
  fetch("http://localhost:3333/list")
    .then((data) => data.json());
}

POST

Skapa resurser, skickar data till servern, oftast via HTML-formulär. Vilken data det är syns inte i URL:en utan är dold.

Exempel

function setItem(item) {
  fetch("http://localhost:3333/list"), {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    },
    body: JSON.stringify({item})
  }
  .then((data) => data.json());
}                        

PUT

Skickar också data till servern, används ofta för att uppdatera data. Till skillnad från POST så gör det ingenting om PUT skickas flera gånger. Till exempel kan du skapa en användare via POST, skickar du den requesten flera gånger så skapas flera användare. Med PUT kan du till exempel uppdatera ditt användarnamn, men där gör det ingen skillnad som samma requests råkar skickas flera gånger.

Exempel

function editItem(id, item) {
  fetch("http://localhost:3333/list/"+id), {
    method: "PUT",
    headers: {
      "Content-Type": "application/json", 
    },
    body: JSON.stringify({item})
  }
  .then((data) => data.json());
}

DELETE

Raderar en specifik resurs från servern/databasen, till exempel om du vill radera ett inlägg du har gjort på någon sida.

Exempel

function setItem(id) {
  fetch("http://localhost:3333/list/"+id), {
    method: "DELETE",
    headers: {
      "Content-Type": "application/json", 
    },
    body: JSON.stringify({id})
  }
  .then((data) => data.json());
}  

Fler exempel med fetch

Exempel: ange metoder med fetch

fetch('https://jsonplaceholder.typicode.com/posts/34', {
  method: 'POST', // eller PUT eller DELETE
  body: JSON.stringify({
    // här går det att skicka arrayer och objekt också, måste använda JSON. stringify
    title: 'foo',
    body: 'bar',
    userId: 1
  })
})
  .then(response => response.json())
  .then(json => console.log(json));

Exempel: fetch med async await och try catch

// async await (GET)
async function getPost() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts/30');
  const data = await response.json();
  console.log(data);
}

// async await try catch (GET)
async function getPost2() {
  try {
    const response = await fetch(
      'https://jsonplaceholder.typicode.com/posts/35'
    );
    const data = await response.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

Mer läsning

• MDN Web Docs - Using Fetch

Referenser