Question

我是javascript的新手，并且遇到了异步行为的问题。我试图在React动作中读取文件。重要部分如下所示：

if(file){
    const reader = new FileReader();
    reader.readAsDataURL(inquiryFile);
    reader.onload = function() {
        body = JSON.stringify({
            fileToUpload: reader.result,
        });
        return dispatch(basicRequest(body));
    };
    reader.onerror = function(error) {
        console.error('Error uploadingFile: ', error);
    };
}
else{
    return dispatch(basicRequest());
}

负责调用此操作的组件需要根据成功或错误结果分派另一个操作。

return submitFileAction(masterId, data).then((result) => {
    if (!result.error) {
        console.log('success');
    } else {
        console.log('error');
    }
});

问题是，结果返回到＆＃39;然后部分＆＃39;未定义，我收到错误后调用filereader.onload。我想问一下如何等待filereader的结果。

感谢。

Answer 1

您可能希望将FileReader包装成Promise。

if (file) {
  return new Promise(function(resolve, reject){
    ...
    reader.onload = function(){
      ...
      resolve(dispatch(basicRequest(body)));
    };
    reader.onerror = function(error) { reject(error); };
  });
}

错误将被处理为：

return submitFileAction(masterId, data).then((result) => {
  console.log('success'); 
}).catch((error) => {
  console.log('error');
});

这假设dispatch（）也返回一个Promise。

在React动作中读取文件

1 个答案: