JavaScript FileReader() 및 가능한 반환 또는 폐쇄 문제

Question

마지막으로, 내 첫 번째 질문은 여기에 stackoverflow. 관련 답변을 검색했음을 보증 할 수는 있지만 아무도 내 문제에 부합하지 않습니다. 지금 자바 스크립트를 배우고 .NET 및 C++의 배경 지식을 가지고 있지만이 코드를 사용하여 기대했던 것을 수행 할 수 없습니다. 나는 여기에 여러 버전 중 하나를 복사하고 있습니다. 아마도 return 문을 의심스럽게 배치 할 수 있습니다. 그러나 아마도 이것을 도와 줄 수있을 것입니다.

function readFile(file) {              
    var reader = new FileReader(); 
    reader.onload = readSuccess;            
    function readSuccess(evt) {       
     var text = evt.target.result; 
     return text;          
    }; 
    reader.readAsText(file);         
} 

여기 제가 시도하는 것은 type = "file"인 태그 입력을 통해 HTML에 액세스하는 파일을 읽는 것입니다. 모든 것이 코드 부분까지 잘 돌아갑니다. 내가 좋아하는 콘솔의 변수에 함수의 반환을 캡처, 크롬 콘솔 및 방화범을 사용 :

var x = readFile(aFile); 

그리고 내가 무엇을 얻을 것은 '정의되지 않은'메시지입니다. 중단 점을 사용하면 return 문에서 텍스트 내용을 볼 수 있으며 올바르게 채워집니다! 그러나 본문은 반환되지 않습니다! 관련 질문을 보았습니다.하지만 innerHTML과 다른 방식의 트릭을 사용하여 문제를 해결합니다.이 함수의 결과는 다른 JS 함수에 의해 소비되고 업데이트되지 않기 때문입니다. DOM의 일부.

미리 감사드립니다.

Answer 1

undefined은 readFile(aFile)이 반환하기 때문에 (즉, 아무 것도 아니기 때문에) 나타납니다. 이벤트 리스너와 마찬가지로 이벤트 데이터를 가져 오는 다양한 방법이 있으며 그 중 하나는 콜백입니다. 내가 파일을 그것으로 전달 된 데이터를 읽을 때 호출됩니다 readFile의 두 번째 인수로 기능을 추가 한

function readFile(file, cb) { 
    var reader = new FileReader(); 
    reader.onload = readSuccess; 
    function readSuccess(evt) { 
     cb(evt.target.result) 
    }; 
    reader.readAsText(file); 
} 

var x; 

readFile(aFile, function (data) { 
    x = data; 
}); 

: 여기에 하나를 사용하도록 수정 코드입니다. 모든 변수 할당은 콜백 내부에서 수행됩니다.

비슷한 결과를 얻는 다른 방법은 promises과 generators이지만 JS 비동기 기본 사항을 먼저 이해해야합니다.