我的 React 组件上有一个图像上传方法，它调用单独的 helpers.js 类中的辅助方法来处理实际的上传，以便我可以在应用程序的其他地方重复使用该方法。
React 组件调用 helper 方法，helper 方法很好地完成了将文件保存到服务器的工作......但原始方法没有等待 Promise 解析。我确定这是我遗漏的一些小东西，但我看不到它。
我已经阅读了这里所有类似的问题，并实现了我认为可以解决它的问题，做了很多修改和重构，在辅助方法中实现了await语法，再次将其支持为promise语法等。但没有效果。
//从react组件中调用方法:
async _uploadPicture(e) {
try {
const pictureUploadResponse = await HelperMethods.uploadPicture(e);
if (pictureUploadResponse.success) { //<=======**PUKES HERE**
console.log(pictureUploadResponse.pictureFullPath);
this.setState({
picture: pictureUploadResponse.picture,
pictureFullPath: pictureUploadResponse.pictureFullPath,
errorEditMessage: pictureUploadResponse.message,
});
console.log(this.state.pictureFullPath);
} else {
this.setState({
errorEditMessage: pictureUploadResponse.message
});
}
} catch (err) {
// error
console.log(err);
}
}
//辅助方法做得很好...... //console.log(response.message) 行输出得很好...图像按预期位于服务器上。
//辅助类方法
static uploadPicture = (e) => {
let formData = new FormData();
formData.append('picToUpload', e.target.files[0]);
console.log("upload control 1");
try {
const settings = {
credentials: 'include',
method: 'POST',
body: formData,
};
fetch(envSettings.API_URI(GLOBALS.ENVIRONMENT) + '/utils/uploadpicture', settings)
.then(res1 => { return res1.json() })
.then(response => {
if (response.success) {
console.log("upload control 2");
console.log(response.message);
return {
success: true,
message: response.message,
picture: response.imageUrl,
pictureFullPath: envSettings.IMAGE_ROOT_URI(GLOBALS.ENVIRONMENT) + response.imageUrl,
}
} else {
return {
success: false,
message: response.message,
}
}
}).catch(err => {
console.log("error uploading image: " + err)
return {
success: false,
message: err,
}
});
} catch (err) {
console.log(err)
return {
success: false,
message: err,
}
}
}
但是调用函数不等待，并陷入了外部catch block ...为什么它不等待？
我真的很欣赏第二双眼睛，我在森林里，看不到树木。谢谢。
最佳答案
为了使等待工作，您需要从辅助类方法返回一个 promise 。您当前正在函数内运行 promise 而不返回它，因此父类中的等待不会等待内部 promise 。要解决此问题，请返回获取。
return fetch(envSettings.API_URI(GLOBALS.ENVIRONMENT) + '/utils/uploadpicture', settings).then(...).then(...).catch(...)
关于reactjs - React async/await 不在调用函数中等待 - 但被调用函数正在正确执行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55308724/