Fetch API

Why use Fetch?

• Generally used with external API's
• Easily get data from local or remote sources.
• It is a replacement for XMLHttpRequest.
• It is a web API that can be used to create requests.
• It is asynchronous and uses Promises.
• Fetch can be used to GET, POST, PUT, or DELETE data
• Error handling is simple
• Fetch Syntax:

fetch(url, { options });

Reading data from local text file

//example.txt file
You'll be successful. Keep working!

fetch('example.txt')
  .then(response => response.text())
  .then(text => console.log(text));

Reading data from a local JSON File

//people.json
[
    {
        "name": "John",
        "age": 20
    }, 
    {
        "name": "Mary",
        "age": 24
    }, 
    {
        "name": "Bob",
        "age": 32
    }
]

fetch('people.json')
    .then( response => response.json())
    .then( json => {
        json.forEach( person => {
            console.log(person.name);
        })
    })

Reading data from an API using Promises

Get Request:

• To handle promises returned by fetch(), we chain .then() methods
• The .json() method converts a returned promise to a JSON object.
• Format

fetch('https://api-url-goes-here.com/endpoint')
  .then(
    response => {
      if (response.ok) {
        return response.json();
      }
      throw new Error('Request failed!');
    },
    networkError => {
      console.log(networkError.message);
    }
  )
  .then(jsonResponse => {
    return jsonResponse;
  });

• Example

fetch("https://jsonplaceholder.typicode.com/photos/10") 
.then(res => res.json()) 
.then(json => { 
    console.log(json)
    const div = document.createElement('div');
    const img = document.createElement('img');
    div.innerHTML = json.title;
    img.src = json.url; 
    document.body.appendChild(div);
    document.body.appendChild(img);
}).catch(err => console.error(err));

Post Request: Fetch POST call takes two arguments

1. An endpoint of the API
2. An object that contains information needed for the POST request

fetch('https://api-url-goes-here.com/endpoint', {
  method: 'POST',
  body: JSON.stringify({ id: '200' }),
})
  .then(
    response => {
      if (response.ok) {
        return response.json();
      }
      throw new Error('Request failed!');
    },
    networkError => {
      console.log(networkError.message);
    }
  )
  .then(jsonResponse => {
    return jsonResponse;
  });

Reading data from an API using async await format

async/await Get Request:

• Format

const getData = async () => {
  try {
    const response = await fetch('https://api-url-goes-here.com/endpoint');
    if (response.ok) {
      const jsonResponse = await response.json();
      return jsonResponse;
    }
    throw new Error('Request failed!');
  } catch (error) {
    console.log(error);
  }
};

• Example

async function getPosts() {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const posts = await response.json();
    
     let html = "";
    
    posts.slice(0,5).forEach( post => {  //to get first 5 posts
        const title = post.title;
        const body = post.body;
        html += `
            <div class='post'>
                <h3>${title}</h3>
                <p>${body}</p>
            </div>
        `;
    });
    document.body.innerHTML = html;
}

getPosts();

async/await Post Request:

• Example:

const getData = async () => {
  try {
    const response = await fetch('https://api-url-goes-here.com/endpoint', {
      method: 'POST',
      body: JSON.stringify({ id: 200 }),
    });
    if (response.ok) {
      const jsonResponse = await response.json();
      return jsonResponse;
    }
    throw new Error('Request failed!');
  } catch (error) {
    console.log(error);
  }
};

• Example:

async function submitPost() {
    let title = "Sample Title";
    let body = "Sample Body";

    const options = {
        method: "POST",
        body: JSON.stringify({ title: title, body: body }),
        headers: new Headers({
        "Content-Type": "application/json"
        })
    };

    const postPromise = await fetch(
        "https://jsonplaceholder.typicode.com/posts",
        options
    );
  
    if(postPromise.ok) {
        const post = await postPromise.json();
        console.log('post', post);
    } else {
        console.log('error');
    }
}

submitPost();