[FRAGE] JavaScript SDK Facebook API - globale Variablen

[eds]

Hallo Leute,

und zwar habe ich mir mal das Facebook JS SDK geladen und ein paar Versuche gestartet. Funktionierte auch auf Anhieb ganz gut. Ich kann per Graph auf meine Daten zugreifen und die via JS Console auch im Browser schön ausgeben. Jetzt aber zum Problem.

Und zwar ruft meine Funktion "getUserData()" zwei Funktionen auf "getEmail()" und "getName()". Diese zwei Funktionen machen nichts, außer per FB.api das entsprechende Graph Objekt holen und dieses in eine globale Variable zu speichern.

Wenn ich später allerdings auf meine zwei globalen Variablen zugreife, sind diese leider nicht befüllt und ich verstehe nicht wieso. Irgendwie arbeitet das Script meinen Code in komischer Reihenfolge ab.

Da ich noch nie mit Javascript gearbeitet habe, scheine ich hier irgendetwas grundlegendes falsch zu machen. Wie kann ich den Interpreter zwingen, meine Codereihenfolge einzuhalten?

Grüße und danke
eds

 

[mikdoe]

js kann man asynchron arbeiten lassen. aber ohne testcode (am besten hier reduziert zeigen oder als jsfiddle) schwierig zu beantworten.

 

[kkapsner]

in eine globale Variable zu speichern.

Keine gute Idee und verursacht dein Problem. Mach' die Verarbeitung der Werte in den Calbacks, wo sie hingehört.

 

[eds]

Ich nutze gerade die Globalen Variablen um das Problem zu verstehen. Späte werde ich sicher eine geschicktere Möglichkeit finden. Jetzt aber mal das Beispiel:

   // Globale Variablen
   var global1 = 'leer';
   var global_email = 'leer';

      // Logged into your app and Facebook.
      console.log('1');
      test();
      getEmail();
      console.log(global1);
      console.log(global_email) 

  // Testfunktion
  function test() {
  console.log('2');
  global1 = 'test';
  return 'test';
  }
  
  // Emailadresse auslesen
  function getEmail()
  {
    console.log('3'); 
  
    FB.api('me?fields=email', function(response) 
      {
        console.log('4');
        global_email = response.email;
      });
   }

In der Konsole erhalte ich nun bei den Logs:

1
2
3
test
leer
4

1, 2 passt ja. Dann wird getEmail() aufgerufen was auch noch passt. Es kommt 3. Danach springt er aber zurück, gibt console.log(global1) und console.log(global_email) aus. Leider ist die global_email aber noch nicht befüllt. Und dann ist er erst bei 4 und befüllt die global_email.

 

[tsseh]

Danach springt er aber zurück, gibt console.log(global1) und console.log(global_email) aus. Leider ist die global_email aber noch nicht befüllt.

ja. logisch, weil global_email erst im callback der fb-api gefüllt wurde. dort kannst du erst auf die variable zugreifen.
die fb-api macht einen request zum fb-server wenn von diesem die antwort kommt, wird das callback gerufen. das dauert ein bischen.

 

[kkapsner]

zwei Funktionen auf "getEmail()" und "getName()".

Ich würde da auch nicht zwei Funktionen draus machen, sondern eine, dann kannst du die Felder in einem Request abfragen und brauchst nicht zwei. Das macht zum einen den Code etwas weniger komplex und zum anderen ist es schneller.

 

[eds]

ja. logisch, weil global_email erst im callback der fb-api gefüllt wurde. dort kannst du erst auf die variable zugreifen.
die fb-api macht einen request zum fb-server wenn von diesem die antwort kommt, wird das callback gerufen. das dauert ein bischen.

Hallo tsseh,

das klingt auch direkt logisch. Wie macht man das denn konkret?

 

[tsseh]

wie macht man was?
zugriff auf die antwort? nur im callback.

FB.api('me?fields=email', function(response) 
{
   // hier kannst du darauf zugreifen
});

 

[eds]

Mein Anwendungsfall ist allerdings der, dass ich dann bestimmte Anworten kombinieren möchte. Kann ich den Interpreter nicht zwingen, erst im Callback die Variablen zu füllen und dann greife ich später darauf zu? Was ist mit rausschreiben in eine DB?

 

[tsseh]

der eleganteste und einfachste weg dafür wären promises

 

[kkapsner]

Kann ich den Interpreter nicht zwingen, erst im Callback die Variablen zu füllen und dann greife ich später darauf zu?

Genau - du musst erst später darauf zugreifen... und das geht im Callback (Promises sind im Grunde genommen auch nichts anderes... nur viel eleganter).

 

[tsseh]

die aussage mit den promises bezog sich mehr auf den teil:

Mein Anwendungsfall ist allerdings der, dass ich dann bestimmte Anworten kombinieren möchte.

var emailPromise = new Promise(function(resolve, reject)
{
  FB.api('me?fields=email', function(response) 
  {
    resolve(response.email);
  });
});

var otherPromise = new Promise(function(resolve, reject)
{
  ...
});

Promise.all([emailPromise, otherPromise]).then(function(value)
{
  console.log(value); // [email, ...]
}, 
function(reason)
{
  console.error(reason);
});