最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin2浏览0评论

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.");
     }
  });
});
Share Improve this question asked Sep 14, 2015 at 12:35 serraosaysserraosays 7,9293 gold badges38 silver badges68 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

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.");
      });
  });
发布评论

评论列表(0)

  1. 暂无评论