我无法获取异步返回的值 function（firebase 存储）

Question

我正在将照片上传到我的 firebase 存储，然后我需要获取这些照片的 url 以将它们发送到数据库。 我的“下载”function 应该返回 url，但我没有办法得到它。 当我在 function 的末尾创建一个 Console.log(url) 时，我可以通过控制台看到它，但是当我尝试用“返回 url”替换它并尝试在我的主模块中使用“then”方法获取它时，或者使用“const url = await download（）”总是让我不确定。 我需要获取值并将其分配给 const o state。

这是我的下载 function，它是我的 controller.js 的一部分

export async function download (path){
    await getDownloadURL(ref(storage, path))
    .then((url) => {
        return (url);
    })
    .catch((error) => {

        switch (error.code) {
        case 'storage/object-not-found':
            console.log('storage/object-not-found')
            break;
        case 'storage/unauthorized':
            console.log('storage/unauthorized')
            break;
        case 'storage/canceled':
            console.log('storage/canceled')
            break;
        case 'storage/unknown':
            console.log("unknow")
            break;
    }
  })
}

所以在我的一个 JSX 文件（反应）中，我有按钮和输入，我实现了这样的功能，但我无法在 var 或 state 中获取值，即使控制台打印显示我“未定义”

 function test() {
  download("/3.png").then(item => console.log(item))
}

async function test() {
  console.log(await download("/3.png"))
}

async function test() {
  const url = await download("/3.png")
}

Answer 1

最终，这是因为您没有从 function 返回值。请注意在您的 function 中，顶层没有return语句

export async function download (path) {
  await getDownloadURL(ref(storage, path))
    .then(/* ... */)
    .catch(/* ... */)
}

您需要在顶层返回一个值，否则您只会得到undefined ：

export async function download (path) {
  // ⬇⬇⬇
  return getDownloadURL(ref(storage, path)) // removed await because it makes no difference here
    // .then(url => url) is pointless and should be removed
    .catch(/* ... */) 
}

此外，您应该在 catch 处理程序中重新抛出异常，或者如果您有意抑制它，至少返回null 。

export async function download (path) {
  return getDownloadURL(ref(storage, path))
    .catch(err => {
      console.log("getDownloadURL failed: " + (err.code || "unknown"), err);
      return null; // suppress exception
    });
}