Architecture for Multiple API Calls Using jQuery and Javascript - Stack Overflow

admin管理员组

文章数量:1326056

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:

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

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

$(document).ready(function() {
  $.ajax({
     url: "",
     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: "=" + 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.");
     }
  });
});

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:

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

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

$(document).ready(function() {
  $.ajax({
     url: "http://example./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./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.");
     }
  });
});

• javascript
• jquery
• json
• ajax

Share Improve this question Follow asked Sep 14, 2015 at 12:35 serraosaysserraosays 7,92933 gold badges3838 silver badges6868 bronze badges 2

• 1 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 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 Commented Sep 14, 2015 at 13:26

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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 plete flow.

https://www.promisejs/patterns/

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

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

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

  function jsonpCall() {
    return $.ajax({
      url: "http://example./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./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.");
      });
  });

本文标签： Architecture for Multiple API Calls Using jQuery and JavascriptStack Overflow