#28 API calls in various forms practice

28-api-calls-in-various-forms-practice.markdown

#28 API calls in various forms practice

Functional - ish style programming to demonstrate various ways to make API calls including Promises, jquery GetJSON, and just regular vanilla javascript.

Uses bootstrap /PUG to have minimal HTML / CSS formatting, focus is mostly javascript and asynchronous callbacks

Uses a simple 2 column flexbox layout scheme

A Pen by Vincent Tang on CodePen.

License.

28-async-practice.markdown

#28 Async Practice

A Pen by Vincent Tang on CodePen.

License.

index.pug

.container-fluid
  h4.text-center Demonstration of api calls in various forms
  .row.text-center
    .col-6.offset-3.d-flex.justify-content-between.align-items-baseline.flex-wrap
      p Pure JS:
      p.pure-js
      p Jquery GET:
      p.jquery-get
      p Jquery getJSON:
      p.jquery-json
    .col-6.offset-3.d-flex.justify-content-between.align-items-baseline.flex-wrap
      p Jquery Ajax
      p.jquery-ajax
    .col-6.offset-3.d-flex.justify-content-between.align-items-baseline.flex-wrap
      p Promise1
      p.promise1
      p Promise2
      p.promise2
      p Promise3
      p.promise3

script.js

window.onload = () => {
  loadPureJS(); // 1 
  loadJqueryGet(); // 2
  loadJqueryJSON(); // 3
  loadAjax(); // 4
  loadPromises(); // 1,2,3
}

///////////////////////////////////////////
// Global Functions
///////////////////////////////////////////

const makeURL = (suffix) => {
  return "https://jsonplaceholder.typicode.com/posts/" + suffix;
}

///////////////////////////////////////////
// Specific Test Functions
///////////////////////////////////////////

const loadPureJS = () => {
  var http = new XMLHttpRequest(); // Request 0 initialized
  
  // Process Request 4 data retrieval
  http.onreadystatechange = () => {
    if(http.readyState == 4 && http.status == 200){
      let jsresponse = JSON.parse(http.response);
      $('.pure-js').append(jsresponse.id);
    }
  }
  
  http.open("GET", makeURL(1), true); // Request 1 setup
  http.send(); // Request 2 sent → Request 3 in process
}

const loadJqueryGet = () => {
  $.get(makeURL(2), (data) =>{
    $('.jquery-get').append(data.id);
  }, "json");
}

const loadJqueryJSON = () => {
  $.getJSON(makeURL(3), (data) =>{
    $('.jquery-json').append(data.id);
  });
}

const loadAjax = () => {
    const handleError = (jwXJR, textStatus, error) => { console.log(error);}
    const success1 = (data) => { $('.jquery-ajax').append(data.id); }
  
    $.ajax({
      // Most values default
      dataType: "jsonp",
      async: "true",
      type: "GET",
      url: makeURL(4),
      success: success1,
      error: handleError
     });
  // Chain more requests with success, use possible recursion / generators.
}

const loadPromises = () => {
  $.get(makeURL(1)).then((data) => {
    $('.promise1').append(data.id);
    return $.get(makeURL(2));
  }).then((data) => {
    $('.promise2').append(data.id);
    return $.get(makeURL(3));    
  }).then((data) => {
    $('.promise3').append(data.id);
  });
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.css

.col-6 { border: 1px solid black; }
.col-6 p { width: 50%; } /* 2 col layout */
.col-6 p:nth-child(even) { color: red; }

/* SAMPLE DATA RESPONSE */
/*
Object {
  body: "lorem ipsum',
  id: 1,
  title: "lorem ipsum",
  userId: 1
}
*/

/* READY STATES
 * 0- Request not initialized
 * 1 - request has been setup
 * 2- request has been sent
 * 3- request is in process
 * 4- request is complete, data retrieved
 */

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />