Fetch Method for Ajax
Video
JavaScript Notes
JavaScript
// basic fetch
// using jsonplaceholder for the data
// remember that fetch returns a promise
// HTTP status codes – http://www.restapitutorial.com/httpstatuscodes.html
// to test with NODE we need to install the node-fetch package
// npm install node-fetch
// let fetch = require ('node-fetch');
// get the details for a random user
const root = 'http://jsonplaceholder.typicode.com';
let id = Math.floor(Math.random( ) * 20) + 1 // id 1 to 20
let uri = root + '/users/' + id;
console.log('FETCH: ', uri);
// any user id higher than 10 will generate a 404 error
fetch(uri) // at its most basic, it is just making a HTTP request
.then( function( response ){
if (response.status == 200){
return response.json( );
} else {
throw new Error('Invalid User ID');
}
})
.then( ( data ) => {
console.log(data);
let jsonData = JSON.stringify(data);
console.log(data);
let output = document.getElementById('output');
output.textContent = jsonData;
})
.catch( (err) => {
console.log('ERROR: ', err.message);
});
Feedback
Submit and view feedback