等待不等待异步函数返回值

沙伊姆·法赫德

我正在使用与 firebase 的反应,我需要将一些图片上传到 firebase 存储,然后保存从上传函数返回的下载 url 以将该值存储在 firestore 上。

这是我的图片上传功能

const imageUpload = async (image) => {
    const uploadTask = storage.ref(`images/${image.name}`).put(image);
    uploadTask.on(
      'state_changed',
      (snapshot) => {},
      (error) => {
        console.log(error);
      },
      () => {
        storage
          .ref('images')
          .child(image.name)
          .getDownloadURL()
          .then((url) => {
            setImageUrl(url);
            console.log(url);
            return url;
          });
      }
    );
  };

这是我的提交处理程序

const handleSubmit = async (e) => {
    e.preventDefault();

    let entry = {
      author: currentUser.email,
      body,
    };
    if (image) {
      await imageUpload(image).then(async (url) => {
        console.log(url);
        entry = {
          author: currentUser.email,
          body,
          imageUrl,
        };
        try {
          await createEntry(entry).then(() => {
            setBody('');
            setShowSnackbar(true);
          });
        } catch (error) {
          console.log(error);
        }
      });
    } 

    try {
      await createEntry(entry).then(() => {
        setBody('');
        setShowSnackbar(true);
      });
    } catch (error) {
      console.log(error);
    }
  };

但是,这不起作用,因为控制台首先显示未定义,然后显示 url,这意味着 await 不等待返回 url。我如何解决这个问题?

36ve

我认为你在混合东西。

如果您使用 async / await,则不需要在您的承诺中使用 then

使用 async/await 习惯用法,您的代码应该看起来更像

async function handleSubmit(e) {
  e.preventDefault();

  let entry = {
    author: currentUser.email,
    body,
  };

  if (image) {
    const url = await imageUpload(image);
    entry = {
      author: currentUser.email,
      body,
      imageUrl,
    };
    try {
      await createEntry(entry);
      setBody("");
      setShowSnackbar(true);
    } catch (error) {
      console.log(error);
    }
  }

  try {
    await createEntry(entry);
    setBody("");
    setShowSnackbar(true);
  } catch (error) {
    console.log(error);
  }
}

async function imageUpload(image) {
  const uploadTask = storage.ref(`images/${image.name}`).put(image);
  return new Promise((resolve, reject) => {
    uploadTask.on(
      "state_changed",
      (snapshot) => {},
      (error) => {
        reject(error);
      },
      () => {
        storage
          .ref("images")
          .child(image.name)
          .getDownloadURL()
          .then((url) => {
            setImageUrl(url);
            resolve(url);
          });
      }
    );
  });
}

async/await实际上是为了使带有 Promise 的编程以某种方式“感觉”同步。使用 then 和回调,除了代码不起作用的事实之外,使它无法从语法中受益。

https://developer.mozilla.org/fr/docs/Learn/JavaScript/Asynchronous/Concepts

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章