27

我正在编写一个函数，该函数必须使用 embed.ly API 从给定视频中获取缩略图信息，但是目前该函数甚至在从 API 获得 JSON 结果之前就返回了一个值。

我正在使用以下代码：

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
        }
    });
}

但是，当使用 Chrome Javascript 控制台时，我可以看到：

  1. 该函数被调用
  2. 返回未定义
  3. XHR 请求完成
  4. 可变缩略图内容显示在控制台中

这显然是错误的顺序。

任何帮助是极大的赞赏！

4

3 回答 3

37

更新的答案

getJSON返回一个承诺（一个只读的延迟），所以你可以听它。但是由于您需要一些后处理，因此您需要链接 athen以允许您更改解析的值。

// 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!
});

原始答案

您可以使用延迟对象，并监听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!
    });

您可以 return $.getJSON'deferred 来获取原始数据。但是由于“后处理”到对象中，因此需要自定义 deferred。您还可以将回调传递给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!
})
于 2012-05-27T17:21:54.587 回答
2

你可以像下面这样简单地使用$.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是异步的。

于 2012-05-27T17:16:54.150 回答
2

使用异步/等待

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

async function someFunction() {
    let thumbNail = await getThumbnail('the_vurl_');
}
于 2020-12-02T01:55:27.727 回答