Question

我在我的react组件上有一个图像上载方法，该方法在一个单独的helpers.js类中调用一个helper方法来处理实际的上载，以便我可以在应用程序的其他地方重用该方法。

react组件调用helper方法，helper方法很好地完成了将文件保存到服务器的工作....但是原始方法并不在等待诺言的解决。我确定这是我所想不到的小东西，但我看不到。

我在这里阅读了所有类似的问题，并实现了我认为可以解决的问题，进行了许多修改和重构，在helper方法中实现了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);

}

}

/// helper方法的工作非常出色... // 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

要等待工作，您需要从助手类方法返回一个Promise。您当前正在函数内部运行promise而不返回它，因此父类中的await不等待内部promise。要解决此问题，请返回获取。

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

React async / await没有在调用函数中等待-但是被调用函数正在正确执行

1 个答案: