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
fetch("https://catfact.ninja/fact")
.then((res) => res.json())
.then((data) => {
console.log(data);
});
xxxxxxxxxx
fetch('https://example.com/api/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
xxxxxxxxxx
fetch('https://ubahthebuilder.tech/posts/1')
.then(data => {
return data.json();
})
.then(post => {
console.log(post.title);
});
xxxxxxxxxx
// fetch API
var myData = async () => {
try {
const raw_response = await fetch("https://jsonplaceholder.typicode.com/users");
if (!raw_response.ok) { // check for the 404 errors
throw new Error(raw_response.status);
}
const json_data = await raw_response.json();
console.log(json_data);
}
catch (error) { // catch block for network errors
console.log(error);
}
}
fetchUsers();
xxxxxxxxxx
async function postData() {
// Define the URL of the resource you want to access
const url = "https://example.com/api/endpoint";
// Define the data you want to send in the request
const data = {
name: "John Doe",
email: "johndoe@example.com"
};
// Use the `fetch` function to make a POST request to the URL
const response = await fetch(url, {
method: "POST", // specify that you want to make a POST request
body: JSON.stringify(data), // convert the data object to a JSON string
headers: {
"Content-Type": "application/json" // set the content type of the request
}
});
// Check the status code of the response to make sure it was successful
if (response.ok) {
// If the request was successful, get the data from the response
const result = await response.json();
// Do something with the data here
console.log(result);
} else {
// If the request was not successful, handle the error here
console.error("Error:", response.statusText);
}
}
xxxxxxxxxx
fetch('http://example.com/data.json')
.then(data => data);
.catch(err => console.log(err));
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
function App() {
fetch("https://catfact.ninja/fact")
.then((res) => res.json())
.then((data) => {
console.log(data);
});