Question

我对JS来说比较新，并且一直坚持这个问题。我试图从函数的返回值中分配一个变量，如下所示：

var data = makeApiRequest(url);

但是，代码会在 makeApiRequest（）功能完成之前继续，导致数据 未定义。

我一直在研究这个问题，发现问题可以通过回调解决。我的问题是，我不确定如何将数据分配给 makeApiRequest（）的结果。

我发现这个例子（在callbackhell.com上），我认为这完全说明了我的问题：

var photo = downloadPhoto('http://coolcats.com/cat.gif')
// photo is 'undefined'!

作者的解决方案：

downloadPhoto('http://coolcats.com/cat.gif', handlePhoto)

function handlePhoto (error, photo) {
  if (error) console.error('Download error!', error)
  else console.log('Download finished', photo)
}

console.log('Download started')

在我的生活中我无法弄清楚的是在这个例子中如何分配（甚至声明）照片。我觉得如果我能解决这个问题，我可以弄清楚我的具体问题。任何帮助将不胜感激。非常感谢提前。

Answer 1

makeApiRequest(url)是异步调用。这意味着如果您在调用它后立即尝试对其进行评估，则它将为undefined。现代的解决方案是使用Promise。

但是，如果您的逻辑不会深入层次，那么回调函数是完全可以接受的。您可以通过改变makeApiRequest函数的参数来实现：

function makeApiRequest (url, callback) {
    // make the api call, and then:
    callback(results);
}

现在，您将致电makeApiRequest()：

makeApiRequest (url, function(data) {
    // handle your data here.
    console.log(data);
});

Answer 2

当download function完成时，它会调用回调函数handlePhoto，并将数据（photo）作为第二个参数传递给它，以便可以在{{1}内部使用它功能。

Answer 3

如果要分配promise的返回值，那么可以将变量包装在异步函数中，然后使用await。

**但 async 和等待是一项新功能，并未得到广泛支持。

因此，假设makeApiRequest（）返回一个promise

  async function any(){ /* using async before function declartion*/

    var getValue = await makeApiRequest(); // using await 

    console.log(getValue); // returned value of makeApiRequest 
  }

JS - 在使用回调时分配变量

3 个答案: