fetch api using promise then
1. to fetch text data from local storage
let variable=document.getElementById("click")
variable.addEventListener("click",gg)
function gg(){
console.log("clicked")
const promiseObj=fetch('data.txt')
console.log(promiseObj)
promiseObj.then(function(data){
console.log(data)
if(data.status!=200){
throw Error(data.statusText)
}
return data.text()
}).catch(function(error){
console.log(error)
}).then(function(finaldata){
console.log(finaldata)
document.getElementById("change").innerHTML=finaldata
})
2. to fetch json data from local storage
function go(){
console.log("ok clicked")
const promiseobj=fetch('data.json');
console.log(promiseobj)
promiseobj.then(function(arg){
console.log(arg)
if (arg.status!=200) {
throw Error(arg.statusText)
} else {
return arg.json()
}
}).catch(function(nxtarg){
console.log(nxtarg)
}).then(function(ok){
console.log(ok)
console.log(ok.name)
console.log(ok.age)
})
}
3. Fetch simple json data prom practical API
function go(){
const promiseobj=fetch("https://jsonplaceholder.typicode.com/posts/1")
console.log(promiseobj)
promiseobj.then(function(arg){
console.log(arg)
if (!arg.ok) {
throw Error(arg.statusText)
} else {
return arg.json()
}
}).then(function(arg1){
console.log(arg1)
setTimeout(function delay() {
document.getElementById("change").style.backgroundColor="red";
document.getElementById("change").innerHTML=arg1.title;
}, 2000);
}).catch(function(arg2){
console.log(arg2)
})
}
4. multiple json data fetching from real api
function go(){
const promiseobj=fetch("https://jsonplaceholder.typicode.com/posts")
console.log(promiseobj)
promiseobj.then(function(arg){
console.log(arg)
if (!arg.ok) {
throw Error(arg.statusText)
} else {
return arg.json()
}
}).then(function(arg1){
arg1.forEach(function(element) {
console.log(element.id)
console.log(element.title)
console.log(element.body)
});
}).catch(function(arg2){
console.log(arg2)
})
}
5. to fetch data from practical API and show it to templates
function go(){
const promiseobj=fetch("https://jsonplaceholder.typicode.com/posts")
console.log(promiseobj)
promiseobj.then(function(arg){
console.log(arg)
if (!arg.ok) {
throw Error(arg.statusText)
} else {
return arg.json()
}
}).then(function(arg1){
let divs=document.getElementById("ohhere")
console.log(divs)
var html=''
arg1.forEach(function(element) {
html=html+`
<div>${element.id}</div>
<div>${element.title}</div>
<div>${element.body}</div>
`
divs.innerHTML=html
})
}).catch(function(arg2){
console.log(arg2)
})
}
6. to send data to other API from form
function go(){
console.log("clicked");
const data={
method:'POST',
Headers:{
'Content-Type':'application/json'
},
body:'{"name": "rajiv","job": "dahal"}'
}
const obj=fetch("https://reqres.in/api/users",data)
obj.then(function(message){
if (!message.ok) {
throw Error(message.statusText)
} else {
return message.json()
}
}).then(function(text){
console.log(text)
}).catch(function(op){
console.log(op)
})
}
Comments
Post a Comment