js-notes.md

JS Study

Custom forEach function

function forEach( arr, callback ) {
  for ( var i = 0; i < arr.length; i++ ) {
    callback( arr[ i ], i, arr );
  }
}

Custom findIndex function

function forEach( arr, callback ) {
  for ( var i = 0; i < arr.length; i++ ) {
   if ( callback( arr[ i ], i, arr ) ) {
     return i;
   }
   return -1;
  }
}

Promises

A promise is an object that represents a task that will be completed in the future

var p1 = new Promise( ( resolve, reject ) => {
  resolve([ 1, 2, 3, 4 ]);
});

p1.then( ( arr ) => {
  console.log("Promise p1 resolved with data: ", arr );
})

Catching errors

var p1 = new Promise( ( resolve, reject ) => {
  reject("error")
});

p1.then( ( data ) => {
  console.log("Promise p1 resolved with data: ", data );
}).catch ( ( data ) => {
  console.error("Promise p1 was rejected with data: ", data );
})

Promise with setTimeout()

var promise = new Promise( ( resolve, reject ) => {
  setTimeout( () => {
    var randomInt = Math.floor( Math.random() * 10 );
    resolve( randomInt );
  }, 4000)
});

promise.then( ( data ) => {
  console.log("Random int passed to resolve: ", data );
});

Promise chaning

var promise = new Promise( ( resolve, reject ) => {
  setTimeout( () => {
    randomInt = Math.floor( Math.random() * 10 );
    resolve( randomInt );
  }, 500);
});

promise.then( ( data ) => {
  console.log( "Random int passed to resolve: ", data );
  return new Promise( ( resolve, reject ) => {
    setTimeout( () => {
      resolve( Math.floor( Math.random() * 10 ));
    }, 3000);
  });
}).then( ( data ) => {
  console.log("Second random int passed to resolve: ", data);
});

var promise = new Promise( ( resolve, reject ) => {
  resolve( 5 );
});

promise.then( ( data ) => {
  return data * 2;
}). then( ( data ) => {
  return data + 20;
}).then( ( data ) => {
  console.log( data );
});

Promise and async

function CallbackMethod(value, cb) {
    setTimeout(() => {
        cb(undefined, 'Hello');
    }, value)
}


function PromiseMethod(value) {
    return new Promise((resolve, reject) => {
        CallbackMethod(value, (err, res) => {
            if (err) reject(err);
            else resolve(res);
        })
    })
}

async function AsyncMethod() {
    await PromiseMethod(100);
    await PromiseMethod(200);
    await PromiseMethod(300);
    return Promise.resolve();
}

AJAX

var XHR = new XMLHttpRequest();

XHR.onreadystatechange = () => {
  if ( XHR.readyState === 4 && XHR.status === 200 ) {
    console.log( XHR.responseText )
  }
}

XHR.open("GET", 'https://api.github.com/zen')
XHR.send();

Exercise 1

const btn = document.querySelector("#btn");
const image = document.querySelector("#image");

btn.addEventListener("click", () => {
  const XHR = new XMLHttpRequest();

  XHR.onreadystatechange = () => {
    if ( XHR.readyState === 4 && XHR.status === 200 ) {
      let url = JSON.parse( XHR.responseText ).message
      image.src = url;
    }
  }

  XHR.open("GET", 'https://dog.ceo/api/breeds/image/random')
  XHR.send();
})

Exercise 2

api: https://api.coindesk.com/v1/bpi/currentprice.json

const btn = document.querySelector(".btn");
const priceTitle = document.querySelector(".price");

btn.addEventListener("click", () => {
  const XHR = new XMLHttpRequest();

  XHR.onreadystatechange = () => {
    if ( XHR.readyState === 4 && XHR.status === 200 ) {
      let priceData = JSON.parse( XHR.responseText ).bpi.EUR.rate + " EUR";
      priceTitle.innerText = priceData;
    }
  }

  XHR.open("GET", 'https://api.coindesk.com/v1/bpi/currentprice.json')
  XHR.send();
})

Fetch API

fetch( url )
  .then( ( res ) => {
    console.log( res );
  })
  .catch( ( err ) => {
    console.log( err );
  });

Example

fetch( url )
  .then( ( res ) => {
    console.log( res );
    return res.json();
  })
  .then( ( data ) => {
    console.log( data.bpi.EUR.rate );
  });

post example

fetch( url, {
  method: 'POST',
  body: JSON.stringify({
    name: 'blue',
    login: 'bluecat'
  })
})
  .then( ( data ) => {
    // do something 
  })
  .catch( ( err ) => {
    // handle err
  })

Error handling

let btn = document.querySelector("button");
btn.addEventListener( "click", () => {
  let url = 'https://api.github.com/users/nicco88';
  fetch( url )
    .then( ( res ) => {
      if ( !res.ok ) {
        throw Error( res.status ); // up to you
      }
      return res;
    })
    .then( ( response ) => {
      console.log( "ok" )
    })
    .catch( ( err ) => {
      console.log( err );
    });
});