Question

我的应用程序正在尝试将文件上传到 S3。 S3 上传工作正常。问题是在imageUpload 返回后，在handleSubmit() 中，它声称imageUpload() 的返回值是未定义的。我怀疑它与异步/等待有关，我不太熟悉。任何专家都可以解释我缺少什么吗？

  async function imageUpload() {
 
    const params = {
      Bucket: BUCKET_NAME,
      Key: product.media.name,
      Body: product.media
    };
    s3.upload(params, function(s3Err, data) {
        if (s3Err) throw s3Err
        console.log(`File uploaded successfully at ${data.Location}`) // successfully get data.Location here
        return data.Location
    });

  }

  async function handleSubmit(event) {
    try {
      event.preventDefault();
      setLoading(true)
      setError('')
      const mediaUrl = await imageUpload()

      const url = `${baseUrl}/api/product`

      const { name, desc } = product
      const payload = { name, desc, mediaUrl } // mediaUrl is undefined here
      
      const response = await axios.post(url, payload)

    } catch(error) {
      catchErrors(error, setError)
    } finally {
      setLoading(false)
    }
  }

Answer 1

您对 s3.upload 的调用是在异步函数中，但使用回调，并且仅返回到回调（不以任何方式返回到外部函数）。适用于 JS 的 AWS 开发工具包现在全部（或几乎全部）支持 Promise，因此您应该能够这样做：

async function imageUpload() {
  const params = {
    Bucket: BUCKET_NAME,
    Key: product.media.name,
    Body: product.media
  };

  const data = await s3.upload(params).promise()
  console.log(`File uploaded successfully at ${data.Location}`)
  return data
}

Answer 2

您必须将 imageUpload 代码包装在 Promise 中，然后传递数据以解析您要返回的回调，如果出现错误，则在拒绝回调中传递它们，在异步任务中抛出错误可能会产生意外行为，因此在那里使用拒绝回调。

async function imageUpload() {

    const params = {
        Bucket: BUCKET_NAME,
        Key: product.media.name,
        Body: product.media
    };

    return new Promise((resolve, reject) => {
        s3.upload(params, function (s3Err, data) {
            if (s3Err) {
                reject(s3Error);
            }
            
            console.log(`File uploaded successfully at ${data.Location}`) // successfully get data.Location here
            resolve(data.Location);
        });
    });
}

Answer 3

问题出在您的 imageUpload 函数中。你没有告诉它等待来自 s3.upload 的响应

 function imageUpload() {
    return new Promise((resolve, reject) => {
        const params = {
           Bucket: BUCKET_NAME,
           Key: product.media.name,
           Body: product.media
        };
        s3.upload(params, function(s3Err, data) {
           if (s3Err) reject(s3Err)
           else resolve(data.Location)
        
        });

    });

  }

'await' 电话不等待

3 个答案: