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.
DOM
JSON
Last updated 1 year ago