1.1 Fungsi panggilan balik
Fungsi panggilan balik: Meneruskan fungsi A sebagai parameter untuk memanggil fungsi lain B, maka A adalah fungsi panggilan balik. [Direkomendasikan: tutorial video JavaScript]
Beberapa contoh bernama callback
fungsi Berapa banyak anjing yang kamu punya(fn){
fn('seekor anjing')
}fungsi menghitung anjing(angka){
console.log(kuantitas)
}
Berapa banyak anjing yang Anda miliki (hitung anjing) // satu anjingPanggilan balik anonim
fungsi Berapa banyak anjing yang kamu punya(fn){
fn('seekor anjing')
}
Berapa banyak anjing yang Anda miliki (function(number){console.log(number)
}) // seekor anjing Contoh umum
Fungsi panggilan balik digunakan di jQuery, dan panggilan balik anonim digunakan di sini.
$("#btn").klik(fungsi(){
console.log('klik saya')
})1.2 Neraka Panggilan Balik (Kerugian Panggilan Balik 1)
Callback hell: mengacu pada situasi di mana callback disarangkan terlalu banyak, membuat kode sulit untuk dipahami.
let info = []fungsi Berapa banyak anjing yang kamu punya(fn){
fn('seekor anjing')
}fungsi Berapa banyak kucing yang kamu punya(fn){
fn('seekor kucing')
}fungsi mengetahui(kuantitas,panggilan balik){
info.push(kuantitas)
console.log(info) if(panggilan balik){
panggilan balik()
}
}//Mulai menelepon. Jika ada beberapa lapisan lebih dari ini, akan sulit untuk memahami berapa banyak anjing yang Anda miliki (fungsi(jumlah anjing){
console.log(jumlah anjing)
Mengerti(jumlah anjing, fungsi(){
Berapa banyak kucing yang anda pelihara(fungsi(jumlah kucing){
console.log(jumlah kucing)
Mengerti (jumlah kucing)
})
})
})1.3 Cara mengatasi masalah tanpa menggunakan Promise
Gunakan fungsi bernama alih-alih fungsi anonim
let info = []fungsi Berapa banyak anjing yang kamu punya(fn){
fn('seekor anjing')
}fungsi Berapa banyak kucing yang kamu punya(fn){
fn('seekor kucing')
}fungsi mengetahui(kuantitas,panggilan balik){
info.push(kuantitas)
console.log(info) if(panggilan balik){
panggilan balik()
}
}fungsi memberi tahu Anda jumlah kucing (jumlah kucing){
console.log(jumlah kucing)
Mengerti (jumlah kucing)
}fungsi terus menghitung(){
Berapa banyak kucing yang Anda miliki (beri tahukan jumlah kucingnya)
}fungsi memberi tahu Anda jumlah anjing (jumlah anjing){
console.log(jumlah anjing)
Mengerti (jumlah anjing, terus hitung)
}
Berapa banyak anjing yang Anda miliki (beri tahukan jumlah anjingnya) // Tampaknya tidak jauh lebih baik. . .1.4 Metode panggilan balik berbeda dan perlu diingat secara terpisah (kerugian panggilan balik 2)
readFile('C:\1.txt',function (kesalahan, data) { // panggilan balik dalam metode membaca file node.js if(error) {
console.log('sukses')
konsol.log(data.toString())
} kalau tidak {
console.log('Gagal membaca file')
}
})
$.ajax({ //Callback url:'/2.txt' dalam metode ajax di jQuery
sukses: fungsi(respon) {
console.log('sukses')
},
kesalahan: fungsi(){
console.log('kegagalan')
}
})Promise adalah solusi untuk pemrograman asinkron yang lebih masuk akal dan kuat dibandingkan solusi tradisional - callback dan event. Ini pertama kali diusulkan dan diterapkan oleh komunitas. ES6 menuliskannya ke dalam standar bahasa, menyatukan penggunaannya, dan menyediakan objek Promise secara asli.
3.1 Prinsip pelaksanaan
ES6 menetapkan bahwa objek Promise adalah konstruktor yang digunakan untuk menghasilkan instance Promise. Dengan mengembalikan instance objek Promise di dalam fungsi, Anda dapat menggunakan properti dan metode Promise untuk langkah berikutnya.
fungsi nama fungsi(){ kembalikan Janji baru(fungsi(putuskan, tolak) {
// ... beberapa kode jika (/* operasi asinkron berhasil */){
tekad(nilai); // Dipanggil ketika operasi asinkron berhasil dan meneruskan hasilnya sebagai parameter } else {
reject(error); // Dipanggil ketika terjadi kegagalan asinkron, meneruskan kesalahan sebagai parameter }
})
}3.2 Memanggil logika
Baik S1 maupun E1 tidak melaporkan kesalahan, jalankan S2 (selesaikan eksekusi, sistem mengira sudah selesai, dan tidak ada kesalahan yang dilaporkan)
Jika S1 atau E1 melaporkan kesalahan, jalankan E2 (tolak eksekusi, sistem menganggapnya belum selesai, dan laporkan kesalahan)
Entri front-end (vue) ke kursus penguasaan: masuk ke pembelajaran
4.1 Properti dan metode Janji
milik
Promise.prototype mewakili metode prototipe konstruktor Promise
Janji.prototipe.lalu()
Kembalikan Janji. Hal ini memerlukan paling banyak dua parameter: fungsi callback keberhasilan dan kegagalan Promise.
Janji.prototipe.catch()
Kembalikan Janji dan tangani penolakan. Setara dengan Promise.prototype.then(tidak terdefinisi, onRejected)
Janji.prototipe.akhirnya()
Metode akhirnya() mengembalikan sebuah Janji. Setelah menjalankan kemudian() dan menangkap(), fungsi panggilan balik yang ditentukan oleh akhirnya akan dieksekusi. Hindari situasi di mana pernyataan yang sama perlu ditulis satu kali pada saat itu() dan tangkap().
Janji.semua(dapat diubah)
Mengembalikan instance Promise. Setelah semua janji dalam parameter iterable diselesaikan, callback menyelesaikan penyelesaiannya.
Janji.ras (dapat diubah)
Mengembalikan janji, disertai dengan nilai pengembalian objek janji atau alasan kesalahan penolakan, selama ada objek janji di iterable yang "menyelesaikan" atau "menolak".
Janji.resolve()
Mengembalikan objek Promise yang diselesaikan dengan nilai yang diberikan. Tetapi jika nilai ini adalah yang dapat diubah (yaitu, dengan metode kemudian), janji yang dikembalikan akan "mengikuti" objek yang dapat diubah dan mengadopsi keadaan akhirnya (mengacu pada terselesaikan/ditolak/tertunda/diselesaikan); sebuah Objek janji, maka objek tersebut dikembalikan sebagai nilai kembalian dari metode Promise.resolve; jika tidak, objek janji dikembalikan dengan nilai ini sebagai status sukses.
Janji.tolak()
Mengembalikan objek Janji dengan parameter alasan penolakan.
4.2 Tulis ulang contoh callback hell ke dalam bentuk Promise
Anda dapat melihat bahwa setelah menggunakan Promise, logikanya menjadi sangat intuitif dan ditulis lebih lengkap.
Ketika Promise disarangkan di Promise, yaitu ketika Promise dirangkai - perhatikan kegagalan transmisi informasi. Saat kita menggunakan rantai Promise, jika setiap langkah memerlukan data dari langkah sebelumnya, parameter harus berhasil melewati tekad . Parameter, jika gagal, meneruskan parameter melalui penolakan. Jika Anda lupa meneruskan parameter, Anda tidak akan mendapatkan hasil yang diinginkan.
penyelesaian mengembalikan data yang berhasil ke panggilan balik berikutnya
Tolak mengembalikan data yang gagal ke panggilan balik berikutnya.
Berikan parameter untuk diselesaikan di sini dan ubah menjadi contoh kegagalan. Jangan berikan parameter untuk ditolak terlebih dahulu. Jika gagal, panggilan balik berikutnya tidak akan mendapatkan data.
Lewati parameter untuk ditolak
Kita dapat melihat bahwa meskipun panggilan balik yang gagal diteruskan, panggilan balik yang berhasil berikutnya masih dijalankan. Karena tidak diketahui () mengembalikan tidak terdefinisi secara default, ini setara dengan kegagalan yang telah diproses. panggilan balik berikutnya akan dilaksanakan.
Ubah sesuai yang diharapkan, yaitu tidak akan dipanggil jika gagal.
Bentuk singkat untuk tidak menyerukan kegagalan
Setelah situasi di atas dijalankan, panggilan balik yang berhasil di .then (kecuali untuk anjing) tidak dijalankan. Mari tambahkan panggilan balik yang gagal untuk melihatnya
Anda juga dapat mengembalikan tekad sehingga panggilan balik berikutnya yang berhasil dapat dijalankan.
4.3 Aplikasi
Memuat gambar menulis pemuatan gambar sebagai Janji. Setelah pemuatan selesai, status Janji berubah.
const preloadImage = fungsi (jalur) {
kembalikan Janji baru(fungsi (putuskan, tolak) {
gambar const = Gambar baru();
image.onload = tekad;
image.onerror = tolak;
gambar.src = jalur;
});
};Kombinasi fungsi Generator dan Promise (untuk lebih jelasnya lihat link referensi tutorial Ruan Yifeng)
5.1 menunggu
kasus sukses 
Gunakan coba tangkap jika terjadi kegagalan
Gunakan menunggu dengan try catch, yang lebih lengkap.
Objek janji dapat digunakan untuk mengubah fungsi biasa menjadi bentuk pengembalian janji untuk memecahkan masalah panggilan balik neraka.
Memahami keberhasilan dan kegagalan logika pemanggilan Promise dan dapat menyesuaikannya secara fleksibel.
Pahami inti ilmunya, gunakan dulu, lalu perlahan integrasikan dan serap ilmunya.
Di atas adalah detail isi contoh analisis prinsip dan penggunaan ES6 Promise!
