Architecture for Multiple API Calls Using jQuery and Javascript

Question

Curious about what others see as the best way to architect making an API call that depends on the response of another API call in jQuery.

Steps:

Make an API JSONP call to an endpoint, receive response
If we get a 200 success response from the first call, we would trigger another API call (JSON this time).
Output results into browser.

This is how I would construct it with some crude error handling:

$(document).ready(function() {
  $.ajax({
     url: "http://example.com/json",
     type: 'POST',
     dataType: 'jsonp',
     timeout: 3000,
     success: function(data) {

       // Variables created from response
       var userLocation = data.loc;
       var userRegion = data.city;

       // Using variables for another call
       $.ajax({
         url: "http://example2.com/json?Location=" + userLocation + "&City=" + userRegion,
         type: 'POST',
         dataType: 'json',
         timeout: 3000,
         success: function(Response) {
          $(.target-div).html(Response.payload);
         },
         error: {
          alert("Your second API call blew it.");
         }
       });

     },
     error: function () {
       alert("Your first API call blew it.");
     }
  });
});

What problems are you encountering? Are you sure the second api needs POST and not GET, you aren't sending any data in post body? — charlietfl
– charlietfl, Commented Sep 14, 2015 at 12:46
Good catch - second request should be a GET. Silly mistake on my side but appreciate you taking a look. — serraosays
– serraosays, Commented Sep 14, 2015 at 13:26

JM Yang · Accepted Answer · 2015-09-14 15:07:08Z

6

In terms of architecture, you may consider using Promise pattern to decouple each step into one function, each function cares only about it's own task (do not reference to another step in the flow). This gives more flexibility when you need to reuse those steps. These individual step can be chained together later on to form a complete flow.

https://www.promisejs.org/patterns/

http://api.jquery.com/jquery.ajax/

http://api.jquery.com/category/deferred-object/

  function displayPayload(response) {
    $(".target-div").html(response.payload);
  }

  function jsonpCall() {
    return $.ajax({
      url: "http://example.com/json",
      type: 'GET',
      dataType: 'jsonp',
      timeout: 3000
    });
  }

  function jsonCall(data) {
    // Variables created from response
    var userLocation = data.loc;
    var userRegion = data.city;

    // Using variables for another call
    return $.ajax({
      url: "http://example2.com/json?Location=" + userLocation + "&City=" + userRegion,
      type: 'GET',
      dataType: 'json',
      timeout: 3000
    });
  }

  $(document).ready(function() {
    jsonpCall()
      .done(function(data) {
        jsonCall(data)
          .done(function(response) {
            displayPayload(response);
          }).fail(function() {
            alert("Your second API call blew it.");
          });
      }).fail(function() {
        alert("Your first API call blew it.");
      });
  });

answered Sep 14, 2015 at 15:07

JM Yang

1,2089 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

serraosays Over a year ago

I tried this out and it's exactly what I was looking for: a way to abstract out the code into something more modular. Thanks JM.

Collectives™ on Stack Overflow

Architecture for Multiple API Calls Using jQuery and Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related