how to make a fetch request in javascript code example

Example 1: react post request

componentDidMount() {
    // Simple POST request with a JSON body using fetch
    const requestOptions = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ title: 'React POST Request Example' })
    };
    fetch('https://jsonplaceholder.typicode.com/posts', requestOptions)
        .then(response => response.json())
        .then(data => this.setState({ postId: data.id }));
}

Example 2: how to create a fetch function

const url = 'http://api.open-notify.org/astros.json'

const fetchurl = (url:string):void=>{

       fetch(url).then(res=>res.json()).then(jsonRes=>{
             
            console.log(jsonRes)
       })
}

fetchurl(url)

Example 3: http request javascript fetch

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

Example 4: how to use fetch() javascript

//Most API's will only allow you to fetch on their website.
//This means you couldn't run this code in the console on 
// google.com because:
// 		1. Google demands the fetch request be from https
// 		2. open-notify's API blocks the request outside of their website

fetch('http://api.open-notify.org/astros.json')
.then(function(response) {
  return response.json();
})
.then(function(json) {
  console.log(json)
});

// Here is another example. A method (function) that 
// grabs Game of Thrones books from an API ...

function fetchBooks() {
  return fetch('https://anapioficeandfire.com/api/books')
  .then(resp => resp.json())
  .then(json => renderBooks(json));
}

function renderBooks(json) {
  const main = document.querySelector('main')
  json.forEach(book => {
    const h2 = document.createElement('h2')
    h2.innerHTML = `<h2>${book.name}</h2>`
    main.appendChild(h2)
  })
}

document.addEventListener('DOMContentLoaded', function() {
  fetchBooks()
})