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);
    });