Pemrograman sinkron umumnya mudah untuk debug dan dipelihara, namun, pemrograman asinkron umumnya memberikan kinerja yang lebih baik dan fleksibilitas yang lebih besar. Fitur terbesar dari asinkron adalah bahwa tidak perlu menunggu. "Janji" secara bertahap menjadi bagian terpenting dari JavaScript, dan sejumlah besar API baru telah mulai menerapkan prinsip janji. Mari kita lihat janji apa itu, dan API dan penggunaannya!
Status janji
API XMLHTTPREQUEST adalah asinkron, tetapi tidak menggunakan API janji. Tetapi ada banyak API JavaScript asli yang menggunakan janji:
*API Baterai
*Fetch API (Penggantian untuk XHR)
*API Serviceworker
Janji hanya akan menjadi lebih populer dan umum di masa depan, dan sangat penting bahwa semua pengembang front-end akan menggunakannya. Hal lain yang patut dicatat adalah bahwa Node.js adalah platform berbasis janji (jelas bahwa janji adalah fitur inti darinya).
Penggunaan janji lebih sederhana dari yang Anda pikirkan - jika Anda dulu menggunakan SetTimeout untuk mengontrol tugas asinkron!
Penggunaan Janji Dasar
Konstruktor janji baru () dapat digunakan dalam tugas -tugas asinkron tradisional, seperti penggunaan sebelumnya dari SetTimeout dan XmlHttpRequest. Janji baru dihasilkan menggunakan kata kunci baru. Pada saat yang sama, janji -janji ini memberikan fungsi tekad dan tolak untuk memungkinkan kami melakukan operasi panggilan balik:
var p = janji baru (fungsi (tekad, tolak) {// lakukan tugas async tugas async dan kemudian ... jika (/ * kondisi baik */) {resolve ('success!');} else {reject ('failure!');}}); p.then (function () {/ * lakukan sesuatu dengan hasil */}). Fungsi (function () {) {) {/ * melakukan sesuatu dengan hasil */}). Fungsi (function () {) {) {/ * melakukan sesuatu dengan hasil */}). Function (function () {) {) {/ * melakukan sesuatu dengan hasil */}). Function () {) {) {/ * melakukan sesuatu dengan hasil */}). Function (function () {) {) {/ * melakukan sesuatu dengan hasil */}.Programmer dapat secara manual memanggil tekad dan menolak fungsi dalam fungsi panggilan balik sesuai dengan situasi eksekusi. Berikut adalah contoh yang lebih realistis yang mengubah panggilan XMLHTTPREQUEST ke tugas berbasis janji:
// dari janji dan kembali Jake Archibald: // http://www.html5rocks.com/en/tutorials/es6/promises/#toc-promising-xmlhttprquestfunction Get (url) {// mengembalikan janji baru. Return New Promise (Function (Resolve, Reject) {// Lakukan hal -hal XHR yang biasa var req = new XMlHttpRequest (); req.open ('get', url); req.onload = function () {// ini disebut bahkan pada 404 dll. } {// Menolak dengan teks status // yang diharapkan akan menjadi kesalahan yang bermakna (kesalahan (req.statustext))); console.log ("Sukses!", Respons);}, function (error) {console.error ("Gagal!", Kesalahan);});Promise.Resolve () dan Promise.reject () dapat dipanggil secara langsung. Kadang -kadang, ketika kita menentukan janji itu tidak perlu dieksekusi, kita tidak perlu menggunakan yang baru untuk membuat objek janji, tetapi dapat secara langsung memanggil janji. Misalnya:
var usercache = {}; fungsi getUserDetail (username) {// Dalam kedua kasus, di -cache atau tidak, janji akan dikembalikan jika (usercache [nama pengguna]) {// mengembalikan janji tanpa kata kunci "baru" return janji.resolve (usercache [username]); } // Gunakan API fetch untuk mendapatkan informasi // fetch returns janji return fetch ('users/' + username + '.json') .then (function (hasil) {usercache [username] = hasil; hasil kembalikan;}) .catch (function () {throw new error ('tidak dapat menemukan pengguna:' + username);Karena janji pasti akan kembali, kita dapat menggunakan metode saat itu dan menangkap untuk menangani nilai pengembalian!
Lalu metode
Semua instance objek janji memiliki metode kemudian, yang digunakan untuk berinteraksi dengan janji ini. Pertama, metode kemudian akan memanggil fungsi Resolve () secara default:
janji baru (function (resolve, reject) {// tindakan mock async menggunakan setTimeout setTimeout (function () {resolve (10);}, 3000);}). Kemudian (function (hasil) {console.log (hasil);}); // dari konsol: // 10Kemudian waktu pemicu tindakan panggilan balik adalah janji itu dieksekusi. Kami juga dapat melakukan operasi callback di Metode kemudian:
janji baru (function (resolve, reject) {// Tindakan mock async menggunakan setTimeout setTimeout (function () {resolve (10);}, 3000);}). Kemudian (function (num) {console.log ('pertama kali:', num); return num * 2;}). lalu (function (num) {console. }). Lalu (function (num) {console.log ('terakhir lalu:', num);}); // dari konsol: // pertama kali: 10 // kedua kemudian: 20 // terakhir: 40Anda akan menemukan bahwa masing -masing kemudian panggilan akan mengambil nilai pengembalian sebelumnya kemudian panggil sebagai parameter.
Jika janji telah dieksekusi dan single itu dipanggil lagi, tindakan panggilan balik akan dieksekusi lagi. Jika fungsi callback tolak dieksekusi dalam janji ini, dan metode kemudian dipanggil, fungsi callback tidak akan dieksekusi.
Metode Tangkap
Tangkap ketika janji ditolak (ditolak), metode tangkapan akan dieksekusi:
janji baru (function (resolve, reject) {// Tindakan mock async menggunakan setTimeout setTimeout (function () {reject ('done!');}, 3000);}). Lalu (fungsi (e) {console.log ('selesai', e);}). Catch (function (e) {console.log ('capse: E);}). Catch (function (e) {console.log (' Catch Selesai!'Biasanya kami menangani hasil kegagalan eksekusi dalam metode penolakan, dan menjalankan hasil pengecualian dalam tangkapan:
tolak (kesalahan ('data tidak dapat ditemukan'));
Metode Promise.all
Seringkali ada skenario ketika kita memanggil secara tidak sinkron: kita perlu memanggil beberapa operasi asinkron pada saat yang sama, tetapi kami berharap bahwa kami hanya akan melakukan operasi respons setelah semua operasi selesai - ini adalah peran janji. Semua. Metode Promise.all dapat menerima beberapa janji sebagai parameter, dalam bentuk array, dan fungsi callback akan dipanggil setelah semua janji ini berhasil dieksekusi.
Promise.all ([Promise1, Promise2]). Kemudian (fungsi (hasil) {// Kedua janji diselesaikan}). Catch (function (error) {// satu atau lebih janji ditolak});Contoh yang baik untuk menggunakan janji. Semua adalah melakukan beberapa operasi AJAX (via fetch):
var request1 = fetch ('/user.json'); var request2 = fetch ('/artikel.json'); janji.all ([request1, request2]). Kemudian (function (hasil) {// Kedua janji dilakukan!});Kami juga dapat melakukan campuran API fetch dan status baterai, karena mereka semua mengembalikan janji:
Janji.
Setelah fungsi penolakan dipanggil dalam janji, eksekusi ditolak dan tidak dapat diselesaikan secara normal, situasinya akan sedikit rumit. Setelah janji ditolak, metode penangkapan akan menangkap fungsi penolakan pertama yang dieksekusi:
var req1 = new Promise(function(resolve, reject) { // A mock async action using setTimeout setTimeout(function() { resolve('First!'); }, 4000);});var req2 = new Promise(function(resolve, reject) { // A mock async action using setTimeout setTimeout(function() { reject('Second!'); }, 3000);}); janji.Promise. Semua adalah antarmuka yang sangat penting dan akan memainkan peran penting dalam banyak API janji yang baru lahir.
Janji.race
Promise.race adalah fungsi yang menarik - tidak menunggu semua janji diselesaikan atau ditolak, tetapi dalam semua janji, itu akan menembak selama satu eksekusi berakhir:
var req1 = new Promise(function(resolve, reject) { // A mock async action using setTimeout setTimeout(function() { resolve('First!'); }, 8000);});var req2 = new Promise(function(resolve, reject) { // A mock async action using setTimeout setTimeout(function() { resolve('Second!'); }, 3000);}); janji.Skenario yang berguna adalah mengunduh sumber daya dari beberapa server Mirror. Setelah satu kembali, pengembalian lainnya tidak diproses.
Belajar menggunakan janji
Janji telah menjadi topik yang sangat hangat dalam beberapa tahun terakhir, dan bahkan telah ditarik dari JavaScript untuk menjadi arsitektur bahasa. Saya percaya kita akan segera melihat lebih banyak dan lebih banyak API JavaScript yang akan menggunakan pola berbasis janji.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.