str変数の値を取得する方法は？

Question

FB APIを使用してURL（str変数）を取得しようとしています。私はCONSOLE2​​を試したとき

は、それが写真のURLが含まれていSTR変数の正確な値を示しました。

しかし、私が試したところ、CONSOLE1は動作しませんでした。それは何も印刷しなかった。

いくつかの非同期機能が原因ですか？はい、どのように二つの文を次のコードを書くことができた場合は（私はちょうどに私はgetPhoto()と呼ばれているコンソール1をURLをしたい、1が他の後に実行される問題ではありません）仕事（を1注参照）

注1：両方のステートメントは、strの値がLogin()の機能の中にあることを確認するために、location.hrefとCONSOLE1を意味します。 CONSOLE2ブロックで

function Login() 
    {   
    FB.login(function(response) { 
     if (response.authResponse) 
     { 
      getPhoto(); 
     // window.location.href="quiz.html"; 
      //**CONSOLE1** 
      console.log(str); 
     } else 
     { 
      console.log('User cancelled login or did not fully authorize.'); 
     } 
    },{scope: 'email,user_photos,user_videos,publish_actions'}); 
    } 

    function getPhoto() 
    { 
    FB.api('/me/picture?type=normal', function(response) { 
     var str="<br/><b>Pic</b> : <img src='"+response.data.url+"'/>"; 
     document.getElementById("status").innerHTML+=str; 
     //**CONSOLE2** 
     console.log(str);  
    }); 
    } 

Answer 1

は、明示的に変数strの定義：

var str=... 

をしかし、コンソール1ブロックで、あなたは実際に変数を定義することはありません。 getPhotoが終了すると、変数strが範囲外になり、もはや存在しなくなります。

これを修正するには、ロジックをFB.apiコールのコールバック関数に入れます。その呼び出しは、独自の関数ではなくFB.loginコールバック関数内に置くことができます。このように：

FB.login(function(response) { 
    if (response.authResponse) { 
    FB.api('/me/picture?type=normal', function(response) { 
... 

JavaScriptでは、コールバックをチェーンまたはネストする必要があります。ログインコールバックを待ってから、次のAPI呼び出しを行い、その後ピクチャコールバックを取得する必要があります。

Answer 2

str varのスコープはgetPhoto関数内に残ります。 CONSOLE1で値を取得するには、getPhoto関数からstrの戻り値を行う必要があります。

希望すると、これが役立ちます。

Answer 3

はどのようにこの件について：

function Login() {  
    FB.login((response) => { 
     if (response.authResponse) { 
      getPhoto((str) => { 
       console.log(str); 
      }); 
     } else { 
      console.log('User cancelled login or did not fully authorize.'); 
     } 
    },{scope: 'email,user_photos,user_videos,publish_actions'}); 
} 

function getPhoto(callback) { 
    FB.api('/me/picture?type=normal', (response) => { 
     const str = '<br/><b>Pic</b> : <img src="' + response.data.url + '"/>'; 
     document.getElementById('status').innerHTML += str; 
     callback(str);  
    }); 
} 

ありすぎて（例えば、約束して）他のソリューションがありますが、コールバック関数を使用することは非常に簡単です。また、ES6の構文（const、arrow functions）も追加しました。

FB.getLoginStatusを使用して、ユーザーがページの読み込みにログインしていることを確認し、その機能のコールバックでgetPhotoを呼び出すこともできます。例えば

：http://www.devils-heaven.com/facebook-javascript-sdk-login/

[？私は非同期呼び出しからの応答を返すにはどうすればよい]（の