React async / await не ожидает в вызывающей функции - но вызываемая функция выполняется правильно

Question

У меня есть метод загрузки изображений в моем компоненте реагирования, который вызывает вспомогательный метод в отдельном классе helpers.js для обработки фактической загрузки, чтобы я мог повторно использовать этот метод в другом месте своего приложения.

Компонент реагирует на вызов вспомогательного метода, вспомогательный метод хорошо выполняет свою работу по сохранению файла на сервере .... но оригинальный метод не ожидает разрешения обещания.Я уверен, что это что-то маленькое, что мне не хватает, но я не вижу этого.

Я прочитал все подобные вопросы здесь и реализовал то, что, как я думал, это исправит, сделал многоизменения и рефакторинг, реализованный синтаксис await в вспомогательном методе, повторное резервирование его в синтаксис обещания и т. д., но безрезультатно.

// Вызов метода из компонента реагирования:

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 ... Почему она не ждет?

Я действительно ценю второй взгляд на это, я нахожусь в лесу и не вижу деревьев.Спасибо.

Answer 1

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

return fetch(envSettings.API_URI(GLOBALS.ENVIRONMENT) + '/utils/uploadpicture', settings).then(...).then(...).catch(...)