如何等待异步函数的结果？ [复制]

Posted 2023-03-07

【中文标题】如何等待异步函数的结果？ [复制]

【英文标题】：How to await the result from an async function? [duplicate]

【发布时间】：2021-08-16 01:18:13

【问题描述】：

我目前正在使用 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();
            
          );
    ;

【问题讨论】：

不会引起问题，但是：永远不要这样做return await ...。没用的

【参考方案1】：

您的 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);
        
      );
  ;

【讨论】：

成功了，谢谢

我相信 async 函数总是返回一个 Promise （尽管您仍然需要定义要返回的内容，如答案所述）：developer.mozilla.org/en-US/docs/Web/javascript/Reference/…

确实如此，我不是说返回 a 承诺，我是说返回 the 承诺，因为目前他们正在调用承诺，但是没有返回它，所以他们返回的是 a 承诺，它解析为未定义。