Multiple callbacks with Javascript

Question

Hey there, guys. I have two callbacks of distinct functions that provide me values that need to be used outside of these functions. Follow the code:

FB.api('/me', function(response) {
    FB.api('/me/picture?type=normal', function(response) {
        foto = response.data.url;
    });
    nome = response.name;
});

console.log(foto); //Indefinido
console.log(nome); //Indefinido

Does anyone know how I can do that? Thank you.

Answer 1

Your code does not show full details of what you wrote after that snippet of code, but the FB.api calls are not synchronous, so when you call console.log, communication with the Facebook API is still running and its variables are still empty.

They will be filled at a future time due to asynchronous call.

Your best bet is to encompass the call to FB.api in a function and pass a callback. There are many sophisticated ways to do this, but a very basic but functional example for you to understand the context:

function ObtemNome(callback) {
    FB.api('/me', function(response) {
        callback(response.name);
    });
}

function ObtemFoto(callback) {
    FB.api('/me/picture?type=normal', function(response) {
        callback(response.data.url);
    });
}

function SalvarNome(nome) {
    console.log(nome);
}

function SalvarFoto(foto) {
    console.log(foto);
}

ObtemNome(SalvarNome);
ObtemFoto(SalvarFoto);  

Answer 2

The problem may be a simple thing or a complex thing, but from what I’m seeing it seems you haven’t declared the variables out of function. I suggest you do something like this and see if you still have a way out Undefined:

var nome;
var foto;
FB.api('/me', function(response) {
    FB.api('/me/picture?type=normal', function(response) {
         foto = response.data.url;
    });
     nome = response.name;
});

console.log(foto); 
console.log(nome); 

Internal Methods, usually has internal outputs, but vc can make an external output by calling another method, as the example below:

var valores = [];
FB.api('/me', function(response) {

    FB.api('/me/picture?type=normal', function(response) {
         valorEntrada(response.data.url, 0);
    });
      valorEntrada(response.name, 1);
});

function valorEntrada(valor, pos) {
   valores[pos] = valor;
}

function valorSaida(pos) {
  return valores[pos];
}

var foto = valorSaida(0);
var nome = valorSaida(1);

console.log(foto); 
console.log(nome); 

Answer 3

I was able to adapt the solution of Alfredbaudisch. My code was like this:

    function userInfo(callback) {
        FB.api('/me', function(response) {
            callback(response);
        });
    }

    function userFoto(callback) {
        FB.api('/me/picture?type=normal', function(response) {
            callback(response.data.url);
        });
    }

    userInfo(function(info) {
        userFoto(function(foto) {
            dados = {
                nome: info.name,
                email: info.email,
                facebookId: info.id,
                foto: foto,
            }
            //Faço as operações desejadas com os dados aqui
        });
    });

Thank you, guys