Multiple callbacks with JavaScript

1

Hello everyone. I have two distinct function callbacks that give me values that need to be used outside of these functions. Here is 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 this? Thank you.

    
asked by anonymous 03.08.2015 / 23:57

3 answers

3

Your code does not show full details of what you wrote after that code snippet, but calls to FB.api 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 populated at a future time, due to the asynchronous call.

Your best bet is to enclose 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);  
    
04.08.2015 / 00:48
0

The problem can be a simple thing or a complex thing, but in what I'm seeing it seems that you have not declared the variables outside the function. I suggest you do something like this and see if you continue to have an undefined exit:

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 have internal outputs, but you can do 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); 

    
04.08.2015 / 19:45
0

I was able to solve this by adapting AlfredBaudisch's solution. My code looks 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
        });
    });

Thanks, guys.

    
04.08.2015 / 23:07