Utiliser Promise pour encapsuler les compétences FileReader_javascript sous javascript

Promise est un bon choix lorsqu'il s'agit d'un traitement asynchrone. Il peut réduire le niveau d'imbrication, rendant le code plus lisible et la logique plus claire. ES6 l'a ajouté à la spécification et jQuery 3.0 a également modifié l'implémentation pour se rapprocher de la spécification (annonce de la version 3.0). Certains nouveaux éléments tels que .fetch() sont nativement "thenable", mais la plupart des API précédentes reposent toujours sur des rappels. Pour le moment, il suffit de les réencapsuler pour éviter les pièges d'imbrication et profiter du plaisir apporté par l'expérience Promise.

Utilisation générale de Promise
Examinons d’abord l’utilisation générale de 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
});

Le modèle de conduite de Promise n'est pas compliqué : toute opération est supposée n'avoir que deux résultats, le succès ou l'échec. Il vous suffit ensuite d'appeler le bon programme au bon moment et de suivre les étapes suivantes appropriées. .then(), comme son nom l'indique, signifie l'étape suivante. Une fois que la promesse précédente a obtenu un résultat, c'est-à-dire l'appel de la résolution ou du rejet, la fonction de traitement correspondante est lancée.

L'instance Promise commencera à s'exécuter après sa création, et nous devons déterminer nous-mêmes le résultat, comme un chargement réussi ou le respect d'une certaine condition, etc. En concaténant .then(), une série d’opérations peut être effectuée. Chaque appel à .then() créera une nouvelle instance Promise, qui attendra tranquillement que l'état de l'instance précédente change avant de commencer l'exécution.

Pack FileReader
La prochaine étape consiste à commencer l’emballage. L'idée est très simple. En plus de fournir diverses méthodes de lecture, FileReader dispose également de plusieurs hooks d'événements, parmi lesquels onerror et onload peuvent évidemment servir de base pour juger si la tâche est terminée. Si le chargement réussit, le contenu du fichier sera utilisé, il est donc nécessaire de passer le fichier ou le contenu du fichier à l'étape suivante.

Le code final complété est le suivant :

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

Afin d'être vraiment utile, il existe également quelques opérations pour vérifier les types de fichiers, mais elles ne sont pas liées à l'objectif principal de cet article et ne seront pas répertoriées. Le cœur de ce code consiste à créer un objet Promise, à attendre que FileReader termine la lecture et à appeler la méthode de résolution, ou à appeler la méthode de rejet lorsqu'un problème survient.

Utilisez la fonction juste encapsulée
Vous pouvez désormais l'utiliser dans votre projet :

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

.then() prend en charge deux paramètres, le premier est démarré lorsque la promesse réussit et le second est naturellement démarré lorsqu'elle échoue. Le même effet peut être obtenu en utilisant .catch(). En plus d'une meilleure lisibilité, l'avantage de Promise est que l'objet Promise renvoyé peut être transmis arbitrairement et que les appels en chaîne peuvent être poursuivis, laissant beaucoup de place à l'imagination.

Continuer .then()
Alors autant connecter plus d'opérations en série (je voulais au départ rédiger un CV de point d'arrêt, mais j'en parlerai plus tard) :

Sélectionnez tout et copiez-les dans le lecteur de notes (fichier)

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

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.