const getSuggestions = async () => {
const wordQuery = inputField.value;
const endpoint = `${url}${queryParams}${wordQuery}`;
try{
const response = await fetch(endpoint, {cache: 'no-cache'});
if(response.ok){
const jsonResponse = await response.json()
}
}
catch(error){
console.log(error)
}
}
JavaScript Requests
async await syntax
Fetch API Function
fetch('https://api-xxx.com/endpoint', {
method: 'POST',
body: JSON.stringify({id: "200"})
}).then(response => {
if(response.ok){
return response.json();
}
throw new Error('Request failed!');
}, networkError => {
console.log(networkError.message);
}).then(jsonResponse => {
console.log(jsonResponse);
})
promise url parameter fetch api
fetch('url')
.then(
response => {
console.log(response);
},
rejection => {
console.error(rejection.message);
);
JSON Formatted
fetch('url-that-returns-JSON')
.then(response => response.json())
.then(jsonResponse => {
console.log(jsonResponse);
});
fetch api
fetch(url, {
method: 'POST',
headers: {
'Content-type': 'application/json',
'apikey': apiKey
},
body: data
}).then(response => {
if (response.ok) {
return response.json();
}
throw new Error('Request failed!');
}, networkError => {
console.log(networkError.message)
})
}
POST
const data = {
fish: 'Salmon',
weight: '1.5 KG',
units: 5
};
const xhr = new XMLHttpRequest();
xhr.open('POST', '/inventory/add');
xhr.responseType = 'json';
xhr.send(JSON.stringify(data));
xhr.onload = () => {
console.log(xhr.response);
};
GET
const req = new XMLHttpRequest();
req.responseType = 'json';
req.open('GET', '/getdata?id=65');
req.onload = () => {
console.log(xhr.response);
};
req.send();
XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open('GET', 'mysite.com/getjson');
XMLHttpRequest
is a browser-level API that enables the client to script data transfers via JavaScript, NOT part of the JavaScript language.
JSON
const jsonObj = {
"name": "Rick",
"id": "11A",
"level": 4
};
Also see: JSON cheatsheet
Comments