Web APIs

HTTP

Fetch: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

• a better version of XHR

• it returns Promise: fetch(https://api.github.com/users/${this.name}`) .then(resp => resp.json());`

• 4xx and 5xx are not considerd as error so it's in then

• living standard: safari and IE not support it

// GET
fetch('./api/some.json')
  .then(
    function(response) {
      if (response.status !== 200) {
        console.log('Looks like there was a problem. Status Code: ' +
          response.status);
        return;
      }

      // Examine the text in the response
      response.json().then(function(data) {
        console.log(data);
      });
    }
  )
  .catch(function(err) {
    console.log('Fetch Error :-S', err);
  });

// POST with form data, multipart/form-data
// More: https://stackoverflow.com/questions/46640024
let formData = new FormData();
formData.append('name', 'John');
formData.append('password', 'John123');

fetch("api/SampleData", {
  body: formData,
  method: "post"
});

XMLHttpRequest:

  // JSON
  var req = new XMLHttpRequest();
  req.responseType = 'json';
  req.open('GET', url, true);
  req.onload  = function() {
    var jsonResponse = req.response;
    // do something with jsonResponse
  };
  req.send(null);


  // JSON
  function reqListener() {
    var data = JSON.parse(this.responseText);
    console.log(data);
  }
  function reqError(err) {
    console.log('Fetch Error :-S', err);
  }
  var oReq = new XMLHttpRequest();
  oReq.onload = reqListener;
  oReq.onerror = reqError;
  oReq.open('get', './api/some.json', true);
  oReq.send();

Web Workers

• background thread (other than UI thread)

• cannot access DOM

• different context window

Sevice Worker

• Proxy between browser and network. Handles network requests. Thus enabling offline experience.

• it's web worker and more

• cannot access DOM

Web Socket

Communicate from browser to server.

• Socket.IO: A long polling/WebSocket based third party transfer protocol for Node.js.