I have been working with fetch API and Promises recently and I came across .json() . Oftentimes .json() returns the same output as JSON.parse. I googled the question and the results pointed in other directions.

Example with XHR and JSON.parse:

$('#xhr').click(function(){

  var XHR = new XMLHttpRequest();



  XHR.onreadystatechange = function(){

    if (XHR.status == 200 && XHR.readyState == 4) {

      $('#quote').text(JSON.parse(XHR.responseText)[0]);

    }

  };



  XHR.open(GET, url);

  XHR.send();

});

Example with Fetch API:

$('#fetch').click(function(){

  fetch(url)

  .then(function(res){

    return res.json();

  })

  .then(function(quote){

    $('#quote').text(quote);

  })

  .catch(function(err){

    handleError(err);

  });

});

Could someone please explain the difference between these seemingly similar concepts ?
Thanks