Ожидание вызова в функции ответа

Question

Я пытаюсь использовать вызов await внутри response => {} Но я получаю сообщение об ошибке, ожидающее новой строки или точки с запятой.Я думаю, что ошибка связана со структурой функции, но я не уверен, как ее исправить.

Я пытаюсь добавить / обновить изображение профиля пользователя.Когда пользователь нажимает на миниатюру touchableOpacity, будет вызываться _pickImageHandler(), если изображение выбрано и ответ в порядке, он будет ожидать вызова функции uploadImageToStorage, которая загрузит изображение в Firebase Storage.

Если uploadImageToStorage возвращает true, тогда я хочу вызвать editProfileImage, чтобы добавить downloadUrl в документ пользователя.

_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)
    }
}

Есть ли более эффективный способ с меньшим количеством вызовов функций для этого.Спасибо за любую помощь.

Answer 1

Чтобы использовать оператор await, вы должны использовать его внутри функции async.Изменение вашего обратного вызова на что-то вроде этого должно сработать.

async (response) => {
    // your logic
}

Answer 2

Как я вижу твой код, ответ должен иметь async

Answer 3

Добавьте async к вашей функции, и тогда await будет распознан как допустимое ключевое слово в вашей функции (при условии, что вы используете браузер, который поддерживает асинхронные функции или переносит):

async response => {
  // ...
}