'await'呼叫不会等待

Question

我的应用程序正在尝试上传文件到S3。S3上传工作正常。问题是imageUpload返回后，在handlessubmit()中，它声明imageUpload()的返回值未定义。我怀疑它与async/await有关，我不太熟悉。有专家能解释一下我错过了什么吗?

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

你必须包装你的imageUpload代码内承诺，然后通过数据来解决你想要返回的回调，如果有一些错误你传递他们在拒绝回调，抛出错误在异步任务可以给意外的行为，所以使用拒绝回调那里。

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 2

问题在于您的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)

});
});
}

Answer 3

您对s3.upload的调用是在异步函数中，但使用回调，并且仅返回回调(不以任何方式返回到外部函数)。用于JS的AWS sdk现在全部(或大部分)都支持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
}