JS承诺或异步等待返回作为对象承诺

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();解析为网址。 如果我控制台.logurlResult我会从Firebase获得一个img网址。 但是，当我在另一个代码块中使用 refImg 时：

src 显示为对象承诺

我也试过：

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(( 的返回值传递给 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，所以你在第二次尝试时仍然在函数中返回 promise。因此，refImg = resultImg会导致refImg成为"返回网址的承诺"。

您认为前面的答案不起作用的原因可能是，您调用了householdPics()并尝试在不使用.then或await的情况下获取值。由于我householdPics异步函数，它将始终返回一个 Promise。所以同样，你必须得到值.then或await.

更新 2

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

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

然后等待函数：

refImg = await refDetails();

它仍然解析并返回 Promise 的值。因此，如果您要返回该await，则可以将其保存在异步函数中(虽然我不建议使用它，因为它很安静令人困惑(。