Apakah dua kaedah pemprosesan tak segerak dalam JavaScript?

Dua kaedah pemprosesan tak segerak dalam JavaScript: 1. Gunakan "Janji" untuk mengendalikan tak segerak, yang boleh membantu menguruskan kod yang dikembalikan oleh kaedah tak segerak; 2. Gunakan "tak segerak/menunggu" untuk mengendalikan tak segerak, yang boleh digunakan untuk mengendalikan Peristiwa tak segerak dikendalikan menggunakan sintaks segerak.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Pemprosesan tak segerak dalam JavaScript

Janji

(1) promise object It ialah spesifikasi dan corak yang dicadangkan oleh kumpulan kerja commonJS, dengan tujuan menyediakan antara muka bersatu untuk pengaturcaraan tak segerak.

(2) Promise ialah corak Promise boleh membantu menguruskan kod yang dikembalikan secara tidak segerak. Dia merangkum kod dan menambah lapisan pengurusan yang serupa dengan pengendalian acara. Kita boleh menggunakan janji untuk mendaftarkan kod yang akan dijalankan selepas janji itu berjaya atau gagal.

(3) Selepas janji selesai, kod yang sepadan juga akan dilaksanakan. Kami boleh mendaftarkan sebarang bilangan fungsi untuk dijalankan pada kejayaan atau kegagalan, dan kami boleh mendaftarkan pengendali acara pada bila-bila masa.

(4) Janji ada dua keadaan: 1. Menunggu (pending) 2. Selesai (settled).

Janji akan kekal dalam keadaan menunggu sehingga panggilan tak segerak yang dibalutnya kembali/masa tamat/berakhir.

(5) Pada masa ini, status janji telah selesai. Status siap terbahagi kepada dua kategori: 1. Selesai; 2. Ditolak.

(6) janji diselesaikan (diselesaikan): bermakna ia berakhir dengan jayanya. Janji ditolak (ditolak) bermakna ia tidak berakhir dengan jayanya.

//promise
var p=new Promise(function(resolved))
//在这里进行处理。也许可以使用ajax
setTimeout(function(){
   var result=10*5;
   if(result===50){
      resolve(50);
   }else{
     reject(new Error('Bad Math'));
  }
},1000);
});
p.then(function(result){
    console.log('Resolve with a values of %d',result);
});
p.catch(function(){
   console.error('Something went wrong');
});

(1) Kunci kepada kod terletak pada panggilan ke setTimeout().

(2) Perkara penting ialah dia memanggil fungsi menyelesaikan() dan menolak(). Fungsi resolve() memberitahu pengguna janji bahawa janji telah diselesaikan; fungsi reject() memberitahu pengguna janji bahawa janji gagal diselesaikan dengan jayanya.

(3) Terdapat juga beberapa kod lain yang menggunakan promise. Beri perhatian kepada penggunaan kemudian dan tangkapan Anda boleh menganggap mereka sebagai pengendali untuk acara yang berjaya dan gagal.

(4) Perkara yang bijak ialah kami memisahkan pemprosesan janji dari negeri. Dalam erti kata lain, kita boleh memanggil p.then (atau p.catch) seberapa banyak yang kita mahu, tanpa mengira keadaan janji itu.

(5) Promise ialah cara standard mengurus kod tak segerak dalam ECMAscript 6. Pustaka javascript menggunakan promise untuk mengurus ajax, animasi dan interaksi tak segerak biasa yang lain.

Ringkasnya, ideanya ialah: setiap tugas tak segerak mengembalikan objek janji, yang mempunyai kaedah kemudian yang membolehkan fungsi panggil balik ditentukan. Sebagai contoh, fungsi panggil balik f2 bagi f1 boleh ditulis sebagai:

f1.then(f2);

f1 perlu ditulis semula seperti berikut (dilaksanakan menggunakan jquery):

function f1(){
   var dfd=$.deferred();
   settimeout(function(){
     //f1的任务代码
     dfd.resolve();
　 },500);
  return dfd.promise;  
}

Kelebihan menulis ini cara: fungsi panggil balik ditulis sebagai Dengan kaedah penulisan rantai, aliran program dapat dilihat dengan jelas, dan terdapat satu set lengkap kaedah sokongan yang dapat merealisasikan banyak fungsi berkuasa.

Sebagai contoh, nyatakan berbilang fungsi panggil balik

f1().then(f2).then(f3);

Contoh lain, nyatakan fungsi panggil balik apabila ralat berlaku:

f1().then(f2).fail(f3);

Selain itu, ia mempunyai tiga yang pertama Kelebihan kedua-dua kaedah ialah jika tugas telah selesai dan fungsi panggil balik ditambah, fungsi panggil balik akan dilaksanakan serta-merta.

Jadi anda tidak perlu risau tentang kehilangan acara atau isyarat.

Kelemahan kaedah ini: Agak sukar untuk ditulis dan difahami.

async menanti

Sejak kedatangan ES6 Promise, kod tak segerak telah berubah secara beransur-ansur daripada panggilan balik neraka kepada pemprosesan saluran paip berfungsi yang elegan, tetapi untuk For pembangun yang tidak biasa dengannya, ia hanya berubah daripada neraka panggilan balik kepada neraka Janji.

telah menyeragamkan async/await baharu dalam ES8 Walaupun ia hanyalah gula sintaksis untuk menggabungkan Fungsi Janji dan Penjana, peristiwa tak segerak boleh disegerakkan melalui async/await Apabila berurusan dengan tatabahasa. , ia seperti pokok tua yang mekar bunga baru Gaya penulisannya berbeza sama sekali daripada Janji:

function wait(time, fn) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('wait:', time)
      resolve(fn ? fn() : time)
    }, time)
  })
}
await wait(500, () => console.log('bar'))
console.log('foo')
// wait: 500
// bar
// foo

dibungkus ke dalam Janji dengan membungkus setTimeout ke dalam Janji dan kemudian dipanggil dengan kata kunci await. . Anda boleh melihat bahawa hasil daripada pelaksanaan segerak ialah bar muncul dahulu dan kemudian foo, iaitu peristiwa tak segerak yang ditulis sebagai pemprosesan segerak yang disebut pada permulaan.

Lihat contoh lain:

async function withAsyncAwait() {
  for(let i = 0; i 3402058288807f50677058ab1f5894f3 console.log(i))
  }
}await withAsyncAwait()
// wait: 0
// 0
// wait: 500
// 1
// wait: 1000
// 2
// wait: 1500
// 3
// wait: 2000
// 4

melaksanakan fungsi withAsyncAwait dalam kod dan menggunakan gelung for dan kata kunci await untuk melaksanakan berulang kali wait fungsi; jalankan di sini , gelung akan menunggu beberapa saat yang berbeza dalam urutan setiap kali sebelum melaksanakan gelung seterusnya.

Apabila menggunakan async/await, memandangkan kata kunci await hanya boleh dilaksanakan dalam fungsi async, pastikan anda ingat untuk menggunakannya pada masa yang sama.

Selain itu, apabila menggunakan gelung untuk memproses peristiwa tak segerak, anda perlu ambil perhatian bahawa banyak kaedah Tatasusunan yang disediakan selepas ES6 tidak menyokong sintaks async/await Jika anda menggunakan forEach dan bukannya for di sini, hasilnya ialah Ia menjadi pelaksanaan segerak dan mencetak nombor setiap 0.5 saat:

[Cadangan berkaitan: tutorial pembelajaran javascript]

Atas ialah kandungan terperinci Apakah dua kaedah pemprosesan tak segerak dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!