Using Fetch API in JavaScript
Get Method using JavaScript Promise
fetch('http://example.com/movies.json') .then(response => response.json()) .then(data => console.log(data));
Supplying request options
// 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 });
Checking that the fetch was successful
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); });
Supplying your own request object
const myHeaders = new Headers(); const myRequest = new Request('flowers.jpg', { method: 'GET', headers: myHeaders, mode: 'cors', cache: 'default', }); fetch(myRequest) .then(response => response.blob()) .then(myBlob => { myImage.src = URL.createObjectURL(myBlob); });
Headers
const content = 'Hello World'; const myHeaders = new Headers(); myHeaders.append('Content-Type', 'text/plain'); myHeaders.append('Content-Length', content.length.toString()); myHeaders.append('X-Custom-Header', 'ProcessThisImmediately');
const myHeaders = new Headers({ 'Content-Type': 'text/plain', 'Content-Length': content.length.toString(), 'X-Custom-Header': 'ProcessThisImmediately' });
console.log(myHeaders.has('Content-Type')); // true console.log(myHeaders.has('Set-Cookie')); // false myHeaders.set('Content-Type', 'text/html'); myHeaders.append('X-Custom-Header', 'AnotherValue'); console.log(myHeaders.get('Content-Length')); // 11 console.log(myHeaders.get('X-Custom-Header')); // ['ProcessThisImmediately', 'AnotherValue'] myHeaders.delete('X-Custom-Header'); console.log(myHeaders.get('X-Custom-Header')); // null
fetch(myRequest) .then(response => { const contentType = response.headers.get('content-type'); if (!contentType || !contentType.includes('application/json')) { throw new TypeError("Oops, we haven't got JSON!"); } return response.json(); }) .then(data => { /* process your data further */ }) .catch(error => console.error(error));
References
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch