JS promise 或 async await return 作为对象 promise

Question

我知道这个问题已经被问了无数次了。我自己问过。具体到下面的代码我不知道为什么这不能解决。

const householdPics = (data, props) => {
  let refImg;

  async function refDetails() {
    let urlResult;
    const ref = await props.firebase.storageRef(`images/${data.profilePic}`);
    return urlResult = new Promise((resolve, reject) => {
      ref.getDownloadURL()
      .then(url => resolve(url))
      .catch(e => reject(e))
    })
  }

  if (!data.profilePic || data.profilePic == 'NULL') {
    refImg = require("../../assets/img/empty-avatar.png");
  } else {
    refImg = refDetails();
  }

我敢肯定我把这件事复杂化了，我已经搞了这么久，连自己都弄糊涂了。我希望 refImg = refDetails(); 解析为 url。如果我 console.log urlResult 我从 firebase 得到一个 img url 。但是，当我在另一个代码块中使用 refImg 时：

src 显示为 Object Promise

我也试过：

  async function refDetails() {
    const ref = await props.firebase.storageRef(`images/${data.profilePic}`);
    const refUrl = await ref.getDownloadURL();
    return refUrl;
  }

这是我在阅读更多相关内容后尝试的另一种尝试。仍然失败:(

  let refImg;

  function refDetails() {
    const ref = props.firebase.storageRef(`images/${data.profilePic}`);
    const imgUrl = ref.getDownloadURL()
    return imgUrl.then(url => {return url})
  }

  if (!data.profilePic || data.profilePic == 'NULL') {
    refImg = require("../../assets/img/empty-avatar.png");
  } else {
    const resultImg = refDetails();;
    refImg = resultImg;
  }

如何将 ref.getDownloadURL() 的 return 值传递给 refImg？

Answer 1

尝试：

const householdPics = async (data, props) => {
  let refImg;

  async function refDetails() {
    let urlResult;
    const ref = await props.firebase.storageRef(`images/${data.profilePic}`);
    return await ref.getDownloadURL():
  }

  if (!data.profilePic || data.profilePic == 'NULL') {
    refImg = require("../../assets/img/empty-avatar.png");
  } else {
    refImg = await refDetails();
  }

更新：

ref.getDownloadURL() 是一个 Promise，为了使用结果值，即 url，您必须在 .then 的回调中获取它，或者您使用 async await 语法，这使得异步过程看起来像我之前的回答一样同步。

imgUrl.then(url => {return url}) Promise.then() 也是一个 Promise，因此您在第二次尝试时仍然 returning 函数中的 promise。因此 refImg = resultImg 导致 refImg 成为 "Promise returning a url".

您认为之前的答案不起作用的原因可能是您调用了 householdPics() 并尝试在不使用 .then 或 await 的情况下获取值。由于我将 householdPics 设为异步函数，因此它始终 return 是一个 Promise。因此，您必须再次使用 .then 或 await.

获取值

更新 2

我刚刚尝试 return 在异步函数中使用 Promise。似乎如果您 return 一个 Promise 而不是在异步函数中解析值，例如：

async function refDetails() {
    let urlResult;
    const ref = await props.firebase.storageRef(`images/${data.profilePic}`);
    return ref.getDownloadURL():
  }

然后等待函数：

refImg = await refDetails();

它仍然解析并且return是 Promise 的值。因此，如果您正在 returning 它，则可以在异步函数中保存 await （虽然我不推荐它，因为它很容易混淆）。

JS promise 或 async await return 作为对象 promise

JS promise or async await return as an object promise

javascript

async-await

es6-promise

更新：

更新 2