FileReader와 비동기 처리

fileReader

• filereader.onload가 성공했을 때만 반환돼는거라고 하는데 그러면 실패했을 때는?
• 파일 비동기 작업 어케 처리 가능한가?

onload는 이벤트 핸들러이다.

즉, 읽기 동작이 성공적으로 완료되면 발생하는 것이다.

FileReader의 상태값들은 다음과 같은데,

• empty: 0: 아직 데이터가 로드 되지 않았음
• loading: 1: 데이터가 로딩중
• done: 2: 모든 읽기 요청이 완료됨

다시 말해, done일 때 onload의 함수가 실행되기 때문에 readAsText()가 밑에 있어도 onload는 readAsText()보다 나중에 실행되게 된다. (비동기적으로 실행된다.)

FileReader의 이벤트 핸들러

• FileReader.onload(() ⇒ {}): 읽기 동작이 성공적으로 완료되었을 때마다 발생하는 이벤트
• FileReader.onerror(() ⇒ {}): 읽기 동작에 에러가 생길 때마다 발생하는 이벤트

Promise를 사용해서 읽은 파일의 데이터를 반환

FileReader의 상태값

• EMPTY : 0 : 아직 데이터가 로드되지 않았음
• LOADING : 1 : 데이터가 로딩중
• DONE : 2 : 모든 읽기 요청이 완료됨

💡 DONE인 경우에 FileReader.onload() 함수가 실행되며 인자값인 콜백함수가 비동기적으로 동작함
→ onload 이벤트 핸들러 안의 결과값을 return하려면 Promise를 사용해야한다!

Async Await을 이용한 FileReader data 반환

• onload()의 콜백함수가 성공적으로 실행되면 resolve()로 데이터 반환

• onerror()가 실행되면 reject()로 에러 메시지 반환

• 내가 작성한 코드

// 엑셀파일 데이터를 2차원 배열 데이터로 변경해주는 함수
export default function readExcelFile(file) {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.readAsArrayBuffer(file);
    fileReader.onload = (e) => {
      if (!e.target) return;

      try {
        const bufferArray = e.target.result;
        const fileInformation = read(bufferArray, {
          type: "buffer",
          cellText: false,
          cellDates: true,
        });
        const sheetName = fileInformation.SheetNames[0];
        const rawData = fileInformation.Sheets[sheetName];
        const data = utils.sheet_to_json(rawData, { header: 1 });
        resolve(data);
      } catch (err) {
        reject(new Error(err));
      }
    };

    fileReader.onerror = (e) => {
      reject(new Error(e.target.error));
    };
  });
}