xxxxxxxxxx
fetch('https://example.com/api/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
xxxxxxxxxx
const fetchData = async () => {
try {
const response = await fetch('http://example.com/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'X-My-Custom-Header': '123', //optional
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue',
// ...
}),
});
const json = await response.json();
} catch (error) {
console.error(error);
}
}
xxxxxxxxxx
async function yourFunction() { //Most compact way to return a fetch
const response = await fetch('some-url', {});
const json = await response.json();
return json; //do here wathever with your json if you want to return
} //a specific part of it.
yourFunction().then(resp => {
console.log(resp); //Here you get the function response and print it
});
xxxxxxxxxx
// 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
});
xxxxxxxxxx
// Update fields in form based on API GET request
function update_form_fields(term, field){
fetch("/api/profiles/?format=json")
.then((response)=>{
return response.json();
}).then((data) => {
let profile = data.find(el => el[field] == term);
document.getElementById("name-input").value = profile.name;
document.getElementById("email-input").value = profile.email;
});}
xxxxxxxxxx
import React, { useEffect, useState } from "react";
function App() {
const [user, setUser] = useState([]);
const fetchData = () => {
return fetch("https://jsonplaceholder.typicode.com/users")
.then((response) => response.json())
.then((data) => setUser(data));
}
useEffect(() => {
fetchData();
},[])
return (
<main>
<h1>User List</h1>
<ul>
{user && user.length > 0 && user.map((userObj, index) => (
<li key={userObj.id}>{userObj.name}</li>
))}
</ul>
</main>
);
}
export default App;
xxxxxxxxxx
//feth method
// - take the url as parameter
// - return a promise
// - pass response when resolved
// - pass error when rejected
// - the response has the http response information
// - use the .json() is used to get the body of the response
// - .json return a promise
// - resolve the promise with data as the argument
fetch("test.json")
.then(response =>{
return response.json();
}).then(data=>{
document.body.innerHTML = data.name;
console.log(data)
}).catch(error =>{
console.error(error)
})