2012-05-27 3 views
15

embed.ly API를 사용하여 주어진 비디오에서 미리보기 정보를 가져와야하는 함수를 작성하고 있습니다 만, 현재 JSON 결과를 얻기 전에 함수가 값을 반환합니다 API에서.

나는 다음과 같은 코드를 사용하고 있습니다 : 크롬 자바 스크립트 콘솔을 사용하여 때

function getThumbnail(vUrl) { 
    var thumbnail = ''; 
    var title  = ''; 
    var caption  = ''; 
    var content  = ''; 

    $.when($.getJSON("http://api.embed.ly/1/oembed?key=:key&url="+vurl)).then(function(data){ 
     var thumbnail = data.thumbnail_url; 
      console.log(thumbnail); 

     return { 
      thumbnail:thumbnail, 
      vurl:vurl 
     } 
    }); 
} 

을 나는 것을 볼 수 있습니다

  1. 를 함수가
  2. 정의되지 않은
  3. XHR을 반환라고 요청이 완료되었습니다.
  4. 가변 썸네일 콘텐츠가 콘솔에 표시됩니다.

이것은 분명히 잘못된 순서입니다.

도움을 주시면 대단히 감사하겠습니다.

+0

중복 가능성 [? Ajax 호출의 응답을 반환하는 방법 (http://stackoverflow.com/questions/14220321/how-to-return-the -response-from-a-ajax-call) – Bergi

답변

24

업데이트 대답은

getJSON는 약속을 (A가 읽기 전용 연기)을 반환합니다. 그러나 약간의 후 처리가 필요하기 때문에 해결 된 값을 변경할 수있는 then을 연결해야합니다.

// Now using `then` 
function getThumbnail(vUrl){ 
    return $.getJSON("http://api.embed.ly/1/oembed?key=:key&url="+vurl).then(function(data){ 
    return { 
     thumbnail:data.thumbnail_url, 
     vurl:vurl 
    } 
    }); 
} 

//and in your call will listen for the custom deferred's done 
getThumbnail('the_vurl_').then(function(returndata){ 
    //received data! 
}); 

원래 대답

당신은 deferred object를 사용하고 done() 수신 할 수 있습니다.

function getThumbnail(vUrl) { 
    //create our deferred object 
    var def = $.Deferred(); 

    //get our JSON and listen for done 
    $.getJSON("http://api.embed.ly/1/oembed?key=:key&url="+vurl) 
     .done(function(data){ 

      //resolve the deferred, passing it our custom data 
      def.resolve({ 
       thumbnail:data.thumbnail_url, 
       vurl:vurl 
      }); 
     }); 

    //return the deferred for listening 
    return def; 
} 

//and in your call will listen for the custom deferred's done 
getThumbnail('the_vurl_') 
    .done(function(returndata){ 
     //received data! 
    }); 

원시 데이터를 가져 오기 위해 $.getJSON 님을 연기 할 수 있습니다. 그러나 객체로의 "사후 처리"때문에 커스텀 지연이 필요합니다. 또한 getThumbnail()에 콜백을 전달할 수 :

function getThumbnail(vUrl,callback) { 
    $.getJSON("http://api.embed.ly/1/oembed?key=:key&url="+vurl,function(returndata){ 
     callback(returndata); 
    }); 
} 

getThumbnail('the_vurl_',function(returndata){ 
    //received data! 
}) 
+0

! 지연된 메서드 unfortunatly하지만 나를 위해 일하지 않았다 콜백 않았다! – xorinzor

+0

고마워요! 나의 날을 구했다! : D – Pitto

+0

감사의 말을 추가하고 싶었습니다. 왜냐하면이 (Deferred)가 내 프로젝트에서 가지고있는 문제를 정확히 해결했기 때문입니다. 감사! – Frank

1

할 수 있습니다 다음과 같은 간단한 사용 $.getJSON의 콜백 :

function result(res) { 
    console.log(res); 
} 

function getThumbnail(vUrl) { 
    var thumbnail = ''; 
    var title  = ''; 
    var caption  = ''; 
    var content  = ''; 

    $.getJSON("http://api.embed.ly/1/oembed?key=:key&url="+vurl, function(data) { 
    var thumbnail = data.thumbnail_url; 
    console.log(thumbnail); 

    var result = { 
     thumbnail:thumbnail, 
     vurl:vurl 
     }; 

    // passing the result to a function 
    getResult(result); 

    }); 
} 

참고 :

당신은 당신이 return하려고하는 결과를 전달하는 함수를 호출하고있어 볼 , 그러나 당신은 호출자 함수 return 결과 수 없습니다. 왜냐하면 $.getJSON은 비동기식이기 때문입니다. 당신이들을 수 있도록

+0

네,하지만 getThumbnail() 함수에서 다른 함수를 호출하지 않습니다. 따라서이 경우에는 저에게 효과적이지 않습니다. 덕분에 – xorinzor

관련 문제