Verwenden von Promise, um FileReader_Javascript-Fähigkeiten unter Javascript zu kapseln

Promise ist eine gute Wahl, wenn es um asynchrone Verarbeitung geht. Es kann die Verschachtelungsebene reduzieren, wodurch der Code lesbarer und die Logik klarer wird. ES6 hat es zur Spezifikation hinzugefügt, und jQuery 3.0 hat auch die Implementierung geändert, um näher an die Spezifikation heranzukommen (Ankündigung der Veröffentlichung 3.0). Einige neue Elemente wie .fetch() sind nativ „dannbar“, aber die meisten früheren APIs sind immer noch auf Rückrufe angewiesen. Zu diesem Zeitpunkt müssen wir sie nur neu kapseln, um verschachtelte Fallen zu vermeiden und die Freude am Promise-Erlebnis zu genießen.

Allgemeine Verwendung von Promise
Sehen wir uns zunächst die allgemeine Verwendung von Promise an.

// 声明 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
});

Das Antriebsmodell von Promise ist nicht kompliziert: Es wird davon ausgegangen, dass jede Operation nur zwei Ergebnisse hat: Erfolg oder Misserfolg. Dann müssen Sie nur noch das richtige Programm zum richtigen Zeitpunkt aufrufen und die entsprechenden Folgeschritte eingeben. .then() bedeutet, wie der Name schon sagt, den nächsten Schritt. Nachdem das vorherige Versprechen ein Ergebnis hat – also den Aufruf von „resolve“ oder „reject“ – wird die entsprechende Verarbeitungsfunktion gestartet.

Die Promise-Instanz beginnt mit der Ausführung, nachdem sie erstellt wurde, und wir müssen das Ergebnis selbst bestimmen, z. B. erfolgreiches Laden oder Erfüllung einer bestimmten Bedingung usw. Durch die Verkettung von .then() kann eine Reihe von Vorgängen abgeschlossen werden. Jeder Aufruf von .then() erstellt eine neue Promise-Instanz, die still darauf wartet, dass sich der Status der vorherigen Instanz ändert, bevor sie mit der Ausführung beginnt.

FileReader packen
Der nächste Schritt besteht darin, mit dem Verpacken zu beginnen. Die Idee ist sehr einfach. FileReader bietet nicht nur verschiedene Lesemethoden, sondern verfügt auch über mehrere Ereignis-Hooks, darunter onerror und onload, die offensichtlich als Grundlage für die Beurteilung verwendet werden können, ob die Aufgabe abgeschlossen ist. Wenn das Laden erfolgreich ist, ist der Dateiinhalt erforderlich, sodass die Datei oder der Dateiinhalt an den nächsten Schritt übergeben werden muss.

Der endgültige fertige Code lautet wie folgt:

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);
  }
 });
}

Um wirklich nützlich zu sein, gibt es auch einige Vorgänge zum Überprüfen von Dateitypen, die jedoch nicht mit dem Hauptzweck dieses Artikels zusammenhängen und nicht aufgeführt werden. Der Kern dieses Codes besteht darin, ein Promise-Objekt zu erstellen, darauf zu warten, dass der FileReader den Lesevorgang abgeschlossen hat, und die Auflösungsmethode aufzurufen oder die Ablehnungsmethode aufzurufen, wenn ein Problem auftritt.

Verwenden Sie die gerade gekapselte Funktion
Sie können es jetzt in Ihrem Projekt verwenden:

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

.then() unterstützt zwei Parameter: Der erste wird gestartet, wenn das Versprechen erfolgreich ist, und der zweite wird natürlich gestartet, wenn es fehlschlägt. Der gleiche Effekt kann mit .catch() erzielt werden. Neben der besseren Lesbarkeit besteht der Vorteil von Promise darin, dass das zurückgegebene Promise-Objekt beliebig übergeben werden kann und Kettenaufrufe fortgesetzt werden können, was viel Raum für Fantasie lässt.

Weiter .then()
Wir könnten also genauso gut weitere Vorgänge in Reihe schalten (ursprünglich wollte ich einen Breakpoint-Lebenslauf schreiben, aber ich werde später darüber sprechen):

Wählen Sie alle aus und kopieren Sie sie in den Notizenleser (Datei)

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.