Menggunakan Promise untuk merangkum kemahiran FileReader_javascript di bawah javascript

Promise ialah pilihan yang baik apabila berurusan dengan pemprosesan tak segerak Ia boleh mengurangkan tahap bersarang, menjadikan kod lebih mudah dibaca dan logiknya lebih jelas. ES6 menambahkannya pada spesifikasi, dan jQuery 3.0 juga mengubah suai pelaksanaan untuk mendekati spesifikasi (pengumuman keluaran 3.0). Beberapa elemen baharu seperti .fetch() secara asalnya "boleh", tetapi kebanyakan API sebelumnya masih bergantung pada panggilan balik Pada masa ini, kami hanya perlu merangkum semula mereka untuk mengelakkan perangkap bersarang dan menikmati keseronokan yang dibawa oleh Promise.

Penggunaan umum Janji
Mari kita lihat penggunaan umum 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
});

Model pemanduan Promise tidak rumit: sebarang operasi diandaikan hanya mempunyai dua keputusan, kejayaan atau kegagalan. Kemudian anda hanya perlu memanggil program yang betul pada masa yang tepat dan masukkan langkah seterusnya yang sesuai. .then(), seperti namanya, bermaksud langkah seterusnya Selepas Promise sebelumnya mempunyai hasil—iaitu, memanggil menyelesaikan atau menolak—fungsi pemprosesan yang sepadan dimulakan.

Instance Promise akan mula dilaksanakan selepas ia dibuat, dan kita perlu menentukan sendiri hasilnya, seperti berjaya memuatkan atau memenuhi syarat tertentu, dsb. Dengan menggabungkan .then(), satu siri operasi boleh diselesaikan. Setiap panggilan ke .then() akan mencipta contoh Promise baharu, yang akan menunggu dengan senyap untuk keadaan contoh sebelumnya berubah sebelum memulakan pelaksanaan.

Pack FileReader
Langkah seterusnya ialah memulakan pembungkusan. Idea ini sangat mudah Selain menyediakan pelbagai kaedah membaca, FileReader juga mempunyai beberapa cangkuk acara, antaranya onerror dan onload jelas boleh digunakan sebagai asas untuk menilai sama ada tugasan itu selesai. Jika pemuatan berjaya, kandungan fail akan digunakan, jadi perlu untuk menghantar fail atau kandungan fail ke langkah seterusnya.

Kod akhir yang lengkap adalah seperti berikut:

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

Untuk menjadi benar-benar berguna, terdapat juga beberapa operasi untuk mengesahkan jenis fail, tetapi ia tidak berkaitan dengan tujuan utama artikel ini dan tidak akan disenaraikan. Teras kod ini adalah untuk mencipta objek Promise, tunggu FileReader menyelesaikan bacaan, dan panggil kaedah penyelesaian, atau panggil kaedah tolak apabila masalah berlaku.

Gunakan fungsi yang terkandung di dalamnya
Kini anda boleh menggunakannya dalam projek anda:

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

.then() menyokong dua parameter, yang pertama dimulakan apabila Janji berjaya, dan yang kedua secara semula jadi dimulakan apabila ia gagal. Kesan yang sama boleh dicapai menggunakan .catch(). Selain kebolehbacaan yang lebih baik, faedah Promise ialah objek Promise yang dikembalikan boleh dihantar sewenang-wenangnya, dan panggilan berantai boleh diteruskan, meninggalkan banyak ruang untuk imaginasi.

Teruskan .then()
Jadi kita mungkin juga menyambungkan lebih banyak operasi dalam siri (saya pada asalnya ingin menulis resume titik putus, tetapi saya akan membincangkannya kemudian):

Pilih semua dan salinnya ke dalam pembaca nota(fail)

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

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.