Firebase getDownloadURL()没有更新全局变量[重复]。

Question

这个问题在这里已经有了答案:

如何从异步调用中返回响应？ (39个回答)

封闭 上月.

我有以下脚本

    let link = ""
    let baseUrl = "Test-Dataset/"
    let imageRef = "2.jpg"

    storage.ref(baseUrl + imageRef).getDownloadURL().then(
      function(url) {
      link = url
      console.log(url)
    }).catch(function(error) {
    });

    console.log(link)

我的目标是更新 link 变量，并在我使用了 getDownloadURL() 以回报承诺，等待解决。的 console.log .this()函数输出的正是我所需要的--链接到我的firebase存储区的图片。然而，这个 console.log 的初始值，返回函数外的 link 呼叫我的火力基地仓库之前，这只是。"". 为什么会发生这种情况？我的解决方法是做一些像在 https:/stackoverflow.coma535786268849802。?

详情。我在使用vue和npm库 firebase

Answer 1

发生这种情况是因为你的控制台语句在承诺解析之前运行。这与Firebase无关。

这就是发生的事情。

1. 这就是发生的事情。link 变量用一个空字符串声明。
2. 一个处理函数被添加到承诺中。.then(function(url) { ... } )
3. console.log(link) 输出 link 这还是一个空字符串
4. 承诺解决和设定 link 到 url.

试着在你的代码的最后添加这个，以便更清楚地看到效果。

setTimeout(() => {
  console.log(link);
}, 1000);

这将输出 link 1秒后。它的值应该是你想要的URL。

为了解决这个问题，你可以使用asyncawait。

const getLink = async (ref) => {
  const url = await storage.ref(ref).getDownloadURL();

  return url;
}

// NB: A function that uses `await` must be `async`
// So, whichever function uses getLink() must be async

function async someFunction() { // Maybe a Vue method?
  const url = await getLink(baseUrl + imageRef);
  console.log(url);
}

要添加错误处理，使用trycatch块。

function async someFunction() {
  try {
    const url = await storage.ref(baseUrl + imageRef).getDownloadURL();
    console.log(url); // This won't run if getting the URL failed
  } catch (error) {
    // Handle the error
  }
}