时间戳

首页 > 解决方案 > 如何等待异步函数的结果？

javascript - 如何等待异步函数的结果？

问题描述

我目前正在使用 Firebase 将图像上传到存储。我创建了一个 uploadImage 函数，该函数获取图像并将其保存到 Firebase 存储，然后返回该保存图像的 url。当用户单击提交按钮时，我使用该 uploadImage 函数来保存该图像并返回一个 url。图像已正确保存，但正在记录的 url 未定义。我很确定这是我拥有的 aysnc-await 实现的问题。对此有什么想法吗？谢谢！

上传表单.js：

import { uploadImage } from "../firebase/functions";

const UploadForm = () => {
         const [image1, setImage1] = useState(null);

         const saveForm = async (file) => {
             const url1 = await uploadImage(image1);
             console.log("URL", url1); //the url here is UNDEFINED
          };

         return (
               <ImageUploadForm setImageProp={setImage1} />
        
               <button
                 onClick={(e) => {
                   e.preventDefault();

                   saveForm(image1);
                }}
               ></button>
          );

上传图片功能：

const uploadImage = async (file) => {
         const storageRef = storageService.ref().child("posts/" + file.name);
         
         storageRef.put(file).on(
            "state_changed",
            (snapshot) => {},
            (error) => {
               console.log(error);
            },
             async () => {
               return await storageRef.getDownloadURL();
            }
          );
    };

标签： javascriptreactjsfirebaseasync-awaitpromise

解决方案

你的uploadImage函数不返回任何东西，只返回承诺

return storageRef.put(file).on(

或者，（因为我不知道该函数是如何工作的/它返回什么），可能

const uploadImage = (file) => {
   return new Promise((resolve, reject) => {
     const storageRef = storageService.ref().child("posts/" + file.name);
     
     storageRef.put(file).on(
        "state_changed",
        (snapshot) => {},
        (error) => {
           console.log(error);
           reject(error);
        },
        () => {
           const res = storageRef.getDownloadURL();
           resolve(res);
        }
      );
  };
}

推荐阅读