Example 1: Add no cores to fetch
// There were no quick access to mode and credentials to other fetch answers.
// Data you'll be sending
const data = { funny: "Absolutely not", educational: "yas" }
fetch('https://example.com/api/', {
method: 'POST', // The method
mode: 'no-cors', // It can be no-cors, cors, same-origin
credentials: 'same-origin', // It can be include, same-origin, omit
headers: {
'Content-Type': 'application/json', // Your headers
},
body: JSON.stringify(data),
}).then(returnedData => {
// Do whatever with returnedData
}).catch(err => {
// In case it errors.
})
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 = `${book.name}
`
main.appendChild(h2)
})
}
document.addEventListener('DOMContentLoaded', function() {
fetchBooks()
})
Example 5: fetch get request
// Example POST method implementation:
async function postData(url = '', data = {}) {
// Default options are marked with *
const response = await fetch(url, {
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, *cors, same-origin
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, *same-origin, omit
headers: {
'Content-Type': 'application/json'
// 'Content-Type': 'application/x-www-form-urlencoded',
},
redirect: 'follow', // manual, *follow, error
referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
body: JSON.stringify(data) // body data type must match "Content-Type" header
});
return response.json(); // parses JSON response into native JavaScript objects
}
postData('https://example.com/answer', { answer: 42 })
.then(data => {
console.log(data); // JSON data parsed by `data.json()` call
});
Example 6: work with fetches in js
function yourfunction() {
return fetch(API)
.then(response => response.json())
.then(data => data.content)
}