Question

37

Waiting for API call to finish in Javascript before continuing

rated 0 times [ 39] [ 2] / answers: 1 / hits: 68843 / 12 Years ago, tue, june 12, 2012, 12:00:00

something I've struggled with in the past and am struggling with today is preventing an API/AJAX from continuing until you've recieved your response. currently I'm working with the Facebook API. I need to get a response from a call then return it but what's happening is that my function is returning before I ever get a response from the API call. I know why it's happening, I just can't figure out how to prevent it! Here's my code...

function makeCall(){



var finalresponse = ;

    var body = 'Test post';



      FB.api('/me/feed', 'post', { message: body }, function(response) {

        if (!response || response.error) {

         finalresponse = response.error;

        } else {

          finalresponse = 'Post ID: ' + response.id;

        }

      });

      return finalresponse;



}

// ----- EDIT

I noticed some people suggested something like this...

function makeCall(){

var finalresponse = ;

FB.api('/me/feed', 'post', { message: body }, function(response) {

        if (!response || response.error) {

         finalresponse = response.error;

         return finalresponse;

        } else {

          finalresponse = 'Post ID: ' + response.id;

          return finalresponse;

        }

      });

}

But this returns undefined

// EDIT BASED ON UPDATES

function share_share(action_id){



  var finalresponse = makeCall(action_id, process);

  return finalresponse;



}



function makeCall(action_id, callback){



var body = 'Test post';

      FB.api('/me/feed', 'post', { message: body }, function (response) {

        if (!response || response.error) {

         var finalresponse = response.error;

        } else {

          finalresponse = 'Post ID: ' + response.id;

        }

        callback(action_id, finalresponse);

      });



}

function process(action_id, finalresponse){

  console.log(finalresponse);

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

lailab

Add To Favorites

Follow

Total Points: 706

Total Questions: 102

Total Answers: 95

Location: Falkland Islands

Member since Mon, Jul 13, 2020

4 Years ago

lailab questions

1 How can I solve this error? export 'default' (imported as 'App') was not found in './App' (possible exports: App) (im using react)

Sat, Jan 15, 22, 00:00, 2 Years ago

1 How to test a global event bus in VueJS

Fri, Feb 21, 20, 00:00, 4 Years ago

1 TypeError: render is not a function updateContextConsumer

Tue, Feb 4, 20, 00:00, 4 Years ago

1 How to add font awesome icon dynamically from JS file?

Sun, Apr 14, 19, 00:00, 5 Years ago

1 NestJs: How to have Body input shape different from entity's DTO?

Mon, Apr 1, 19, 00:00, 5 Years ago

View All

answered 12 Years ago skylerselenem · Accepted Answer

The question that is asked 100 times a day and seems impossible to have one answer.

The call is asynchronous so it is impossible to do it in one step. Basic example of what you expect.

function one() {

  var a = 1;

  return a;

}

alert( one() );

What is actually happening:

function one() {

  var a;

  window.setTimeout( 

     function() {

        a = 1;

     }, 2000);

  return a;  //This line does not wait for the asynchronous call [setTimeout/ajax call] to run. It just goes!

}

alert( one() );

What you need to do is break it up into two parts.

function one( callback ) {   

   window.setTimeout( function(){  //acting like this is an Ajax call

        var a = 1;

        callback(a);

   },2000);

}

function two( response ) {

   alert(response);

}

one( two );

So in your case you would need to break up your code to handle it in two chunks.

function makeCall( callback ) {

    var body = 'Test post';

      FB.api('/me/feed', 'post', { message: body }, function (response) {

        if (!response || response.error) {

         var finalresponse = response.error;

        } else {

          finalresponse = 'Post ID: ' + response.id;

        }

        callback(finalresponse);

      });

}





function processResponse( response ) {

    console.log(response);

}

makeCall(processResponse);