Promise を使用して FileReader_javascript スキルを JavaScript でカプセル化する

Promise は、非同期処理を扱う場合に適しています。これにより、ネスト レベルが減り、コードが読みやすくなり、ロジックが明確になります。 ES6 ではこれが仕様に追加され、jQuery 3.0 でも仕様に近づくように実装が変更されました (3.0 リリースの発表)。 .fetch() などの一部の新しい要素はネイティブに「thenable」ですが、現時点では、ネストのトラップを回避して 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 の駆動モデルは複雑ではありません。どの操作でも、成功か失敗の 2 つの結果しかないと想定されています。その後、適切なタイミングで適切なプログラムを呼び出し、適切な後続のステップを入力するだけです。 .then() は、名前が示すように、前の Promise の結果が得られた後 (つまり、resolve または拒否の呼び出し)、対応する処理関数が開始されることを意味します。

Promise インスタンスは作成後に実行を開始します。読み込みの成功や特定の条件の満たしなど、結果を自分で判断する必要があります。 .then()を連結することで一連の操作が完了します。 .then() を呼び出すたびに新しい Promise インスタンスが作成され、実行を開始する前に前のインスタンスの状態が変化するのを静かに待ちます。

パック ファイルリーダー
次のステップはパッケージングを開始することです。考え方は非常にシンプルで、さまざまな読み取りメソッドを提供することに加えて、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 が読み取りを完了するのを待って、resolve メソッドを呼び出すか、問題が発生した場合に request メソッドを呼び出すことです。

カプセル化された関数を使用します
プロジェクトで使用できるようになりました:

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

.then() は 2 つのパラメーターをサポートしています。最初のパラメーターは Promise が成功したときに開始され、2 番目のパラメーターは失敗したときに自動的に開始されます。 .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);
 });

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。