当值来自承诺时，从 Javascript 函数返回值

Question

我正在尝试从异步函数调用中返回一个值，并且我理解，来自诸如 this 之类的帖子，您不能使用返回。但是，这暗示我应该能够通过正确使用回调和承诺来完成此任务。不幸的是，我很难弄清楚如何处理下面的问题。

在这里，我想返回一个从 AJAX 调用获得的 URL 值。

 function getGithubURL(name){
  var ghUserURL = 'https://api.github.com/users/bullcitydave?client_id=-----&client_secret=------';

  var jsPromise = Promise.resolve($.getJSON(ghUserURL));

  var avatar;

  jsPromise.then(function(data) {
      avatar = data.avatar_url;
      console.log(avatar);  // I have the correct value here
    });

  return avatar; // how do I return it correctly?
};

Answer 1

您不能在同步函数中返回从异步操作获取的值。异步操作要到稍后的某个时间才会完成，因此当您的 getGithubURL() 函数返回时它根本不可用。这是时间问题，只是 javascript 无法做到的。

您可以通过调整使用 Promise 的方式来解决您的问题。您要做的是使.then() 处理程序成为最终数据的消费者。这样你就可以通过你的 promise 结构传回数据。您还想利用 $.getJSON() 已经返回的承诺 - 无需在此处创建自己的承诺。

这是一种方法。

getGithubURL("bullcitydave").then(function(url) {
    // you can use the avatar url here
});

function getGithubURL(name){
  var ghUserURL = 'https://api.github.com/users/bullcitydave?client_id=-----&client_secret=------';

  return $.getJSON(ghUserURL).then(function(data) {
      return data.avatar_url;
  });
};

您致电$.getJSON()。它返回一个承诺，您可以在该承诺上添加一个.then() 处理程序，以便提取您想要的实际数据。从.then() 处理程序，您返回所需的最终数据。 $.getJSON().then() 序列创建了一个新的承诺，它是您从 getGithubURL() 函数返回的内容，并且在 getJSON().then() 序列完成之前不会被解析。这会将您的头像 URL 显示给外部 .then() 处理程序，如代码所示 以上。

---

或者，如果你的 getGithubURL() 函数的调用者不打算使用承诺，那么你可以让你的函数接受这样的回调：

getGithubURL("bullcitydave", function(url) {
    // you can use the avatar url here
});

function getGithubURL(name, fn) {
  var ghUserURL = 'https://api.github.com/users/bullcitydave?client_id=-----&client_secret=------';

  $.getJSON(ghUserURL).then(function(data) {
      // call the callback and pass it the avatar url
      fn(data.avatar_url);
  });
};