函数等待返回直到 $.getJSON 完成

Posted 2023-02-19

【中文标题】函数等待返回直到 $.getJSON 完成

【英文标题】：function wait with return until $.getJSON is finished

【发布时间】：2012-06-02 07:08:42

【问题描述】：

我正在编写一个函数，该函数必须使用 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 控制台时，我可以看到：

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

这显然是错误的顺序。

非常感谢任何帮助！

【问题讨论】：

How to return the response from an AJAX call? 的可能重复项

【参考方案1】：

更新答案

getJSON 返回一个承诺（只读延迟），因此您可以收听它。但是由于您需要一些后处理，因此您需要链接一个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 以获取原始数据。但是由于“后处理”到对象中，因此需要自定义 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!
)

【讨论】：

谢谢！不幸的是，延迟方法对我不起作用，但是回调起作用了！

非常感谢！拯救了我的一天！ :D

我想补充一句谢谢，因为这（延迟）完全解决了我在自己的项目中遇到的问题。谢谢！

【参考方案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 是异步的。

【讨论】：

是的，但我没有从 getThumbnail() 函数调用另一个函数，所以在这种情况下，这对我不起作用。

【参考方案3】：

使用异步/等待

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_');

【讨论】：

至于今天（接近2021年底）我认为这应该是正确的答案。