Javascript 响应函数中的呼叫等待
我试图在响应=>{}中使用wait调用 但是我在wait中得到了一个错误,表示需要换行或分号。 我认为错误是由于函数的结构造成的,但我不确定如何纠正它 我要做的是添加/更新用户的个人资料图像。当用户单击touchableOpacity缩略图时,将调用_pickImageHandler,如果已拾取图像且响应正常, 它将等待调用uploadImageToStorage函数,该函数将图像上载到Firebase存储 如果uploadImageToStorage返回true,那么我想调用editProfileImage将下载的URL添加到用户的文档中Javascript 响应函数中的呼叫等待,javascript,reactjs,react-native,async-await,response,Javascript,Reactjs,React Native,Async Await,Response,我试图在响应=>{}中使用wait调用 但是我在wait中得到了一个错误,表示需要换行或分号。 我认为错误是由于函数的结构造成的,但我不确定如何纠正它 我要做的是添加/更新用户的个人资料图像。当用户单击touchableOpacity缩略图时,将调用_pickImageHandler,如果已拾取图像且响应正常, 它将等待调用uploadImageToStorage函数,该函数将图像上载到Firebase存储 如果uploadImageToStorage返回true,那么我想调用editProfi
_pickImageHandler = async () => {
ImagePicker.showImagePicker({title: "Select Image", maxWidth: 800, maxHeight: 600},
// I'm assuming I have to somehow adapt the below response line to fix my problem
response => {
if (response.didCancel) {
console.log("User cancelled!");
if (!response.uri) {
this.showToast('User profile image cannot be empty', 'ok', 'warning')
}
}
else if (response.error) {
//todo look at putting below line into toast message
console.log("Error", response.error);
}
else {
console.log("pickedImage URI: ", response.uri);
console.log("pickedImage FileName: ", response.fileName);
this.setState({
//pickedImageUri: response.uri,
userProfileImageUrl: response.uri,
imageName: response.fileName
});
// Im getting the error on the below line
// Expecting a new line or semicolon
let didImageUploadToStorage = await this._uploadImageToStorage(response.uri, response.fileName);
if (didImageUploadToStorage) {
console.log('didImageUploadToStorage', didImageUploadToStorage);
this.editUserProfileImage()
}
else {
console.log('didImageUploadToStorage', didImageUploadToStorage);
}
}
})
};
_uploadImageToStorage = async (uri, fileName) => {
console.log("uploadImage Triggered!");
console.log("uri: ", uri);
console.log("fileName: ", fileName);
//todo add in another folder after userEvents so it will be userEvents/eventDoc.id/filename
const storageRef = firebase.storage().ref(ref);
await storageRef.put(uri)
.then(snapshot => {
console.log("Upload Success!!!!! :) ");
console.log("downloadUrl: ", snapshot.downloadURL);
this.setState({
userProfileImageUrl: snapshot.downloadURL,
});
return true
})
.catch((error) => {
console.log('FirebaseStorage upload error:', error);
return false
});
};
editUserProfileImage = () => {
console.log('editUserProfileImage FIRED!');
console.log('editUserProfileImage text: ', this.state.userProfileImageUrl);
if (!this.state.userProfileImageUrl.length) {
this.showToast('Profile image URL cannot be empty', 'OK', 'danger');
return
}
console.log('3 userDocExists: ', this.state.userDocExists);
if (this.state.userDocExists) {
console.log('docExists == true');
this.updateFieldInDB(usersCollectionRef, 'i4Mefea0wUjHW07jEk0W', 'userProfileImageUrl', this.state.userProfileImageUrl)
}
else {
console.log('docExists == false');
this.setFieldInDB(usersCollectionRef, 'i4Mefea0wUjHW07jEk0W', 'userProfileImageUrl', this.state.userProfileImageUrl)
}
}
有没有一种更好更有效的方法,可以用更少的函数调用来实现这一点。
感谢您的帮助。将异步添加到函数中,然后wait将被识别为函数中的有效关键字,假设您使用的浏览器支持异步函数或正在传输:
async response => {
// ...
}
要使用wait操作符,必须在异步函数中使用它。将您的回调更改为类似的方式应该可以完成这项工作
async (response) => {
// your logic
}
当我看到你的代码时,响应应该是异步的你能用jsfiddle或其他工具分享一些演示吗?嗨,@Jacob非常感谢你,我已经尝试过将异步放在响应之前,但是我在这样做的时候得到了大量黄色下划线,我不知道为什么,但我现在想我可能把异步拼写错了