Promise를 사용하여 Javascript에서 FileReader_javascript 기술을 캡슐화합니다.

Promise는 비동기 처리를 처리할 때 좋은 선택입니다. 중첩 수준을 줄여 코드를 더 읽기 쉽고 논리를 더 명확하게 만들 수 있습니다. ES6에서는 이를 사양에 추가했고, jQuery 3.0에서도 사양에 더 가까워지도록 구현을 수정했습니다(3.0 릴리스 발표). .fetch()와 같은 일부 새로운 요소는 기본적으로 "이후" 가능하지만 현재 대부분의 이전 API는 여전히 콜백에 의존하고 있으므로 중첩 트랩을 방지하고 Promise 경험을 즐기기 위해 다시 캡슐화하기만 하면 됩니다.

Promise의 일반적인 사용법
먼저 Promise의 일반적인 사용법을 살펴보겠습니다.

// 声明 Promise 对象
var p = new Promise(function (resolve, reject) {
 // 不管啥时候，该执行then了，就调用 resolve
 setTimeout(function () { 
  resolve(1);
 }, 5000);

 // 或者不管啥问题，就调用 reject
 if (somethingWrong) {
  reject('2');
 }   
});
  
// 使用 Promise 对象
p.then(function (num) {
 // 对应上面的 resolve
 console.log(num); // 1
}, function (num) {
 // 对应上面的 reject
 console.log(num); // 2
});

Promise의 구동 모델은 복잡하지 않습니다. 모든 작업에는 성공 또는 실패라는 두 가지 결과만 있다고 가정됩니다. 그런 다음 적시에 적절한 프로그램을 호출하고 적절한 후속 단계를 입력하기만 하면 됩니다. .then()은 이름에서 알 수 있듯이 이전 Promise의 결과(즉, 해결 또는 거부 호출)가 나온 후 해당 처리 기능이 시작됨을 의미합니다.

Promise 인스턴스는 생성된 후 실행을 시작하며 성공적인 로딩, 특정 조건 충족 등 결과를 직접 판단해야 합니다. .then()을 연결하면 일련의 작업을 완료할 수 있습니다. .then()을 호출할 때마다 새 Promise 인스턴스가 생성되며, 이 인스턴스는 실행을 시작하기 전에 이전 인스턴스의 상태가 변경될 때까지 조용히 기다립니다.

FileReader 팩
다음 단계는 포장을 시작하는 것입니다. 아이디어는 매우 간단합니다. 다양한 읽기 방법을 제공하는 것 외에도 FileReader에는 여러 이벤트 후크가 있으며 그 중 onerror 및 onload는 작업 완료 여부를 판단하는 기준으로 분명히 사용될 수 있습니다. 로딩이 성공하면 파일 내용이 사용되기 때문에 파일이나 파일 내용을 다음 단계로 전달해야 합니다.

최종 완성된 코드는 다음과 같습니다.

function reader (file, options) {
 options = options || {};
 return new Promise(function (resolve, reject) {
  let reader = new FileReader();

  reader.onload = function () {
   resolve(reader);
  };
  reader.onerror = reject;

  if (options.accept && !new RegExp(options.accept).test(file.type)) {
   reject({
    code: 1,
    msg: 'wrong file type'
   });
  }

  if (!file.type || /^text\//i.test(file.type)) {
   reader.readAsText(file);
  } else {
   reader.readAsDataURL(file);
  }
 });
}

실제로 유용하게 사용하기 위해 파일 형식을 확인하는 몇 가지 작업도 있지만 이 기사의 주요 목적과 관련이 없으므로 나열하지 않습니다. 이 코드의 핵심은 Promise 객체를 생성하고, FileReader가 읽기를 완료할 때까지 기다린 후, 해결 메서드를 호출하거나, 문제가 발생하면 거부 메서드를 호출하는 것입니다.

캡슐화된 기능을 사용하세요
이제 프로젝트에서 사용할 수 있습니다:

reader(file)
 .then(function (reader) {
  console.log(reader.result);
 })
 .catch(function (error) {
  console.log(error);
 });

.then()은 두 개의 매개변수를 지원합니다. 첫 번째 매개변수는 Promise가 성공할 때 시작되고, 두 번째 매개변수는 실패할 때 자연스럽게 시작됩니다. .catch()를 사용하여 동일한 효과를 얻을 수 있습니다. 더 나은 가독성 외에도 Promise의 이점은 반환된 Promise 객체를 임의로 전달할 수 있고 체인 호출을 계속할 수 있어 상상의 여지가 많다는 것입니다.

계속 .then()
따라서 더 많은 작업을 직렬로 연결하는 것이 좋습니다(원래 중단점 이력서를 작성하고 싶었지만 이에 대해서는 나중에 이야기하겠습니다).

모두 선택하여 노트리더(파일)에 복사하세요

 .then(function (reader) {
  return new Promise(function (resolve, reject) {
   // 就随便暂停个5秒吧……
   setTimeout(function () {
    resolve(reader.result); 
   }, 5000);
  });
 })
 .then(function (content) {
  console.log(content);
 });

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.