1//Obj of data to send in future like a dummyDb
2const data = { username: 'example' };
3
4//POST request with body equal on data in JSON format
5fetch('https://example.com/profile', {
6 method: 'POST',
7 headers: {
8 'Content-Type': 'application/json',
9 },
10 body: JSON.stringify(data),
11})
12.then((response) => response.json())
13//Then with the data from the response in JSON...
14.then((data) => {
15 console.log('Success:', data);
16})
17//Then with the error genereted...
18.catch((error) => {
19 console.error('Error:', error);
20});
21
22// Yeah
1fetch('http://example.com/songs')
2 .then(response => response.json())
3 .then(data => console.log(data))
4 .catch(err => console.error(err));
1fetch('http://example.com/movies.json')
2 .then((response) => {
3 return response.json();
4 })
5 .then((myJson) => {
6 console.log(myJson);
7 });
1// GET Request.
2fetch('https://jsonplaceholder.typicode.com/users')
3 // Handle success
4 .then(response => response.json()) // convert to json
5 .then(json => console.log(json)) //print data to console
6 .catch(err => console.log('Request Failed', err)); // Catch errors
1// This will fetch api.example.com/comments with a header and a body
2fetch(`https://api.example.com/comments`, {
3 method: 'POST', //This could be any http method
4 headers: {
5 'Authorization': 'Basic SGVsbG8gdGhlcmUgOikgSGF2ZSBhIGdvb2QgZGF5IQ==',
6 'Content-Type': 'application/json',
7 },
8 body: JSON.stringify({
9 UID: 58,
10 Comment: "Fetch is really easy!",
11 }),
12})
13.then((response) => response.json)
14.then((newComment) => {
15 // Do something magical with your newly posted comment :)
16});
1// Example POST method implementation:
2async function postData(url = '', data = {}) {
3 // Default options are marked with *
4 const response = await fetch(url, {
5 method: 'POST', // *GET, POST, PUT, DELETE, etc.
6 mode: 'cors', // no-cors, *cors, same-origin
7 cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
8 credentials: 'same-origin', // include, *same-origin, omit
9 headers: {
10 'Content-Type': 'application/json'
11 // 'Content-Type': 'application/x-www-form-urlencoded',
12 },
13 redirect: 'follow', // manual, *follow, error
14 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
15 body: JSON.stringify(data) // body data type must match "Content-Type" header
16 });
17 return response.json(); // parses JSON response into native JavaScript objects
18}
19
20postData('https://example.com/answer', { answer: 42 })
21 .then(data => {
22 console.log(data); // JSON data parsed by `data.json()` call
23 });
24