Rumah > Artikel > hujung hadapan web > Apakah neraka panggilan balik es6?
Dalam es6, panggilan balik neraka ialah fungsi panggil balik berbilang lapisan yang bersarang di antara satu sama lain, iaitu, fungsi panggil balik bersarang dalam fungsi panggil balik, ia adalah operasi yang berlaku untuk mencapai pelaksanaan kod berurutan, dan ia akan menyebabkan kita Kod ini sangat teruk dibaca dan sukar untuk dikekalkan kemudian. Janji digunakan dalam es6 untuk menyelesaikan masalah neraka panggilan balik.
Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.
Sebelum kita secara rasmi memahami "neraka panggilan balik", kita terlebih dahulu memahami dua konsep:
1 . Fungsi panggil balik
Apabila fungsi dihantar sebagai parameter kepada parameter lain, dan ia tidak akan dilaksanakan serta-merta, fungsi hanya boleh dilaksanakan apabila syarat tertentu dipenuhi . Terdapat fungsi panggil balik dalam pemasa dan Ajax yang kita kenali:
setTimeout(function(){ //function(){console.log('执行了回调函数')}就是回调函数,它只有在3秒后才会执行 console.log('执行了回调函数'); },3000) //3000毫秒
Fungsi panggil balik di sini ialah function(){console.log('执行了回调函数')}
, yang dilaksanakan selepas 3 saat.
//1.创建异步对象 var xhr=new XMLHttpRequest(); //2.绑定监听事件(接收请求) xhr.onreadystatechange=function(){ //此方法会被调用4次 //最后一次,readyState==4 //并且响应状态码为200时,才是我们要的响应结果 xhr.status==200 if(xhr.readyState==4 && xhr.status==200){ //把响应数据存储到变量result中 var result=xhr.responseText; console.log(result); } } //3.打开链接(创建请求) xhr.open("get","/demo/ajaxDemo",true); //4.发送请求 xhr.send();
Fungsi panggil balik di sini ialah fungsi yang terikat dengan xhr.onreadystatechange
, yang dilaksanakan selepas xhr.send()
menghantar permintaan dan mendapat respons.
2. Tugas tak segerak
Konsep yang sepadan ialah "tugas segerak dibariskan untuk pelaksanaan pada urutan utama, dan hanya tugasan sebelumnya yang dilaksanakan. untuk melaksanakan tugasan seterusnya. Tugas asynchronous tidak memasuki thread utama, tetapi masukkan baris asynchronous sama ada tugasan sebelumnya telah selesai tidak menjejaskan pelaksanaan tugas seterusnya. Begitu juga, ambil pemasa sebagai contoh tugas tak segerak:
setTimeout(function(){ console.log('执行了回调函数'); },3000) console.log('111');
Jika anda mengikut urutan menulis kod, ia harus mengeluarkan "fungsi panggil balik dilaksanakan" dahulu, dan kemudian "111". Tetapi output sebenar ialah:
Tugasan jenis ini yang tidak menyekat pelaksanaan tugasan seterusnya dipanggil tugas tak segerak.
Seterusnya mari kita lihat apa itu neraka panggilan balik.
Berdasarkan perkara di atas, kita boleh membuat kesimpulan: terdapat kod tugas tak segerak yang tidak boleh dijamin untuk dilaksanakan mengikut urutan.
Contohnya, kalau nak sebut satu ayat, susunan perkataan mestilah seperti berikut: Dalam seni mempertahankan diri, keamanan adalah perkara yang paling penting, etika persilatan perlu dihormati, dan pergaduhan tidak boleh dielakkan.
Saya perlu melakukan ini untuk memastikan pesanan itu betul:
setTimeout(function () { //第一层 console.log('武林要以和为贵'); setTimeout(function () { //第二程 console.log('要讲武德'); setTimeout(function () { //第三层 console.log('不要搞窝里斗'); }, 1000) }, 2000) }, 3000)
Seperti yang anda lihat, fungsi panggil balik dalam kod bersarang dalam panggilan balik berfungsi dalam tiga lapisan, keadaan fungsi panggil balik bersarang dalam fungsi panggil balik ini dipanggil neraka panggilan balik.
Ringkasnya, panggilan balik neraka ialah operasi yang berlaku untuk mencapai pelaksanaan kod secara berurutan. Ia akan menyebabkan kod kami menjadi sangat teruk dan sukar untuk dikekalkan kemudian.
Jadi bagaimana untuk menyelesaikan panggilan balik neraka?
function fn(str){ var p=new Promise(function(resolve,reject){ //处理异步任务 var flag=true; setTimeout(function(){ if(flag){ resolve(str) } else{ reject('操作失败') } }) }) return p; } fn('武林要以和为贵') .then((data)=>{ console.log(data); return fn('要讲武德'); }) .then((data)=>{ console.log(data); return fn('不要搞窝里斗') }) .then((data)=>{ console.log(data); }) .catch((data)=>{ console.log(data); })
Tetapi masalah terbesar dengan Promise ialah lebihan kod Tugas tak segerak yang asal dirangkumkan oleh Promise , menggunakan daripada untuk sebarang operasi akan menghasilkan segala-galanya kemudian...kemudian...kemudian... pada pandangan pertama, yang tidak kondusif untuk penyelenggaraan kod.
Jadi kod async/menunggu berikut kelihatan lebih seperti kod segerak.
2.async/menungguMula-mula kita melihat pada kata kunci
, yang diletakkan sebagai kata kunci Pergi ke hadapan fungsi yang diisytiharkan, menunjukkan bahawa fungsi itu adalah tugas tak segerak dan tidak akan menyekat pelaksanaan fungsi berikutnya:async
async function fn(){ return '不讲武德'; } console.log(fn());
Anda boleh melihatnya apabila async fungsi mengembalikan data, ia dikapsulkan secara automatik ke dalam objek Promise .
Seperti objek Promise, apabila memproses tugasan tak segerak, anda juga boleh mengembalikan data yang berbeza mengikut kejayaan dan kegagalan Apabila pemprosesan berjaya, gunakan kaedah kemudian untuk menerimanya, dan apabila gagal, gunakan kaedah tangkapan untuk menerima data:
async function fn() { var flag = true; if (flag) { return '不讲武德'; } else{ throw '处理失败' } } fn() .then(data=>{ console.log(data); }) .catch(data=>{ console.log(data); }) console.log('先执行我,表明async声明的函数是异步的');
当把flag设置为false是,执行结果为:async
关键字说完了,我们看看awai
关键字
//封装一个返回promise的异步任务 function fn(str) { var p = new Promise(function (resolve, reject) { var flag = true; setTimeout(function () { if (flag) { resolve(str) } else { reject('处理失败') } }) }) return p; } //封装一个执行上述异步任务的async函数 async function test(){ var res1=await fn('武林要以和为贵'); //await直接拿到fn()返回的promise的数据,并且赋值给res var res2=await fn('要讲武德'); var res3=await fn('不要搞窝里斗'); console.log(res1,res2,res3); } //执行函数 test();
结果为:
为什么叫await
等待呢,因为当代码执行到async
函数中的await
时,代码就在此处等待不继续往下执行,知道await
拿到Promise对象中resolve的数据,才继续往下执行,这样就保证了代码的执行顺序,而且使异步代码看起来更像同步代码。
总结一下,当我们写代码遇到异步回调时,我们想让异步代码按照我们想要的顺序执行,如果按照传统的嵌套方式,就会出现回调地狱,这样的代码不利于维护,我们可以通过Promise对象进行链式编程来解决,这样尽管可以解决问题,但是ES7给我们提供了更加舒适的async/await语法糖,可以使得异步代码看起来更像是同步代码。
【相关推荐:javascript视频教程、web前端】
Atas ialah kandungan terperinci Apakah neraka panggilan balik es6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!