"Saya Menjanjikan Hasil. "
"Memproduksi kode" adalah kode yang dapat memakan waktu
"Mengkonsumsi kode" adalah kode yang harus menunggu hasilnya
Janji adalah objek JavaScript yang menautkan produksi kode dan konsumsi kode
Objek Janji JavaScript
Objek Janji JavaScript berisi kode penghasil dan panggilan ke kode konsumsi
Sintaks Janji
biarkan Janjiku = Janji baru(fungsi(Resolusiku, Tolakku) {
// "Memproduksi Kode" (Mungkin membutuhkan waktu)
myResolve();
myReject();
});
// "Mengkonsumsi Kode" (Harus menunggu Janji terpenuhi)
janjiku. kemudian(
function(nilai) { /* kode jika berhasil */ },
function(error) { /* kode jika ada error */ }
);
Saat kode penghasil mendapatkan hasilnya, ia harus memanggil salah satu dari dua callback
ResultCallSuccessmyResolve(nilai hasil)ErrormyReject(objek kesalahan)
Menjanjikan Properti Objek
Objek Janji JavaScript bisa
Objek Janji mendukung dua properti. keadaan dan hasil
Saat objek Promise "tertunda" (berfungsi), hasilnya tidak terdefinisi
Saat objek Promise "terpenuhi", hasilnya adalah sebuah nilai
Saat objek Promise "ditolak", hasilnya adalah objek error
janjiku. statemyPromise. result"pending"undefined"fulfilled"a result value"rejected"an error object
Anda tidak dapat mengakses status dan hasil properti Promise
Anda harus menggunakan metode Janji untuk menangani janji
Janji Bagaimana
Inilah cara menggunakan Janji
janjiku. kemudian(
function(nilai) { /* kode jika berhasil */ },
function(error) { /* kode jika ada error */ }
);
Janji. kemudian() mengambil dua argumen, panggilan balik untuk sukses dan satu lagi untuk kegagalan
Keduanya opsional, sehingga Anda dapat menambahkan panggilan balik hanya untuk keberhasilan atau kegagalan
Contoh
function myDisplayer(beberapa) {
dokumen. getElementById("demo"). innerHTML = beberapa;
}
biarkan Janjiku = Janji baru(fungsi(Resolusiku, Tolakku) {
misalkan x = 0;
// Kode penghasil (ini mungkin membutuhkan waktu)
jika (x == 0) {
myResolve("Oke");
} kalau tidak {
myReject("Kesalahan");
}
});
janjiku. kemudian(
fungsi(nilai) {MyDisplayer(nilai);},
function(kesalahan) {myDisplayer(kesalahan);}
);
Cobalah sendiri "
Contoh Janji JavaScript
Untuk mendemonstrasikan penggunaan promise, kita akan menggunakan contoh callback dari bab sebelumnya
- Menunggu Timeout
- Menunggu File
Contoh Menggunakan Callback
setTimeout(function() { myFunction("Aku mencintaimu. "); }, 3000);
function myFunction(nilai) {
dokumen. getElementById("demo"). innerHTML = nilai;
}
Cobalah sendiri "
Contoh Menggunakan Janji
biarkan Janjiku = Janji baru(fungsi(Resolusiku, Tolakku) {
setTimeout(function() { myResolve("Aku mencintaimu. "); }, 3000);
});
janjiku. kemudian(fungsi(nilai) {
dokumen. getElementById("demo"). innerHTML = nilai;
});
Cobalah sendiri "
Contoh menggunakan Callback
fungsi getFile(myCallback) {
biarkan req = new XMLHttpRequest();
persyaratan. buka('DAPATKAN', "mobilku. html");
persyaratan. memuat = fungsi() {
jika (persyaratan. status == 200) {
myCallback(req. responseText);
} kalau tidak {
myCallback("Kesalahan. " + permintaan. status);
}
}
persyaratan. mengirim();
}
getFile(myDisplayer);
Cobalah sendiri "
Contoh menggunakan Janji
biarkan Janjiku = Janji baru(fungsi(Resolusiku, Tolakku) {
biarkan req = new XMLHttpRequest();
persyaratan. buka('DAPATKAN', "mobilku. htm");
persyaratan. memuat = fungsi() {
jika (persyaratan. status == 200) {
myResolve(req. tanggapan);
} kalau tidak {
myReject("File tidak ditemukan");
}
};
persyaratan. mengirim();
});
janjiku. kemudian(
fungsi(nilai) {MyDisplayer(nilai);},
function(kesalahan) {myDisplayer(kesalahan);}
);
Cobalah sendiri "
Dukungan Peramban
ECMAScript 2015, juga dikenal sebagai ES6, memperkenalkan objek Janji JavaScript
Tabel berikut menentukan versi browser pertama dengan dukungan penuh untuk objek Promise
Chrome 33Edge 12Firefox 29Safari 7. 1Opera 20Feb, 2014Jul, 2015Apr, 2014Sep, 2014Mar, 2014
// Executor function passed to the
// Promise constructor as an argument
function(resolve, reject) {
// Your logic goes here...
}
3 adalah blok bangunan penting untuk operasi asinkron dalam JavaScript. Anda mungkin berpikir bahwa janji tidak begitu mudah dipahami, dipelajari, dan dikerjakan. Dan percayalah, Anda tidak sendirian
Janji menantang bagi banyak pengembang web, bahkan setelah menghabiskan bertahun-tahun bekerja dengan mereka
Pada artikel ini, saya ingin mencoba mengubah persepsi tersebut sambil membagikan apa yang telah saya pelajari tentang Janji JavaScript selama beberapa tahun terakhir. Semoga bermanfaat
Apa itu Janji dalam JavaScript?
// Executor function passed to the
// Promise constructor as an argument
function(resolve, reject) {
// Your logic goes here...
}
_3 adalah objek JavaScript khusus. Ini menghasilkan nilai setelah operasi
// Executor function passed to the
// Promise constructor as an argument
function(resolve, reject) {
// Your logic goes here...
}
5 (alias, asinkron) berhasil diselesaikan, atau kesalahan jika tidak berhasil diselesaikan karena waktu habis, kesalahan jaringan, dan sebagainya
Penyelesaian panggilan yang berhasil ditunjukkan oleh panggilan fungsi
// Executor function passed to the
// Promise constructor as an argument
function(resolve, reject) {
// Your logic goes here...
}
6, dan kesalahan ditunjukkan oleh panggilan fungsi
// Executor function passed to the
// Promise constructor as an argument
function(resolve, reject) {
// Your logic goes here...
}
7
Anda dapat membuat janji menggunakan konstruktor janji seperti ini
let promise = new Promise(function(resolve, reject) {
// Make an asynchronous call and either resolve or reject
});
Dalam kebanyakan kasus, janji dapat digunakan untuk operasi asinkron. Namun, secara teknis, Anda dapat menyelesaikan/menolak operasi sinkron dan asinkron
Tunggu, bukankah kita memiliki
// Executor function passed to the
// Promise constructor as an argument
function(resolve, reject) {
// Your logic goes here...
}
8 fungsi untuk operasi asinkron?
Oh ya. Itu benar. Kami memiliki
// Executor function passed to the
// Promise constructor as an argument
function(resolve, reject) {
// Your logic goes here...
}
_8 fungsi dalam JavaScript. Tapi, panggilan balik bukanlah hal yang istimewa dalam JavaScript. Ini adalah fungsi reguler yang menghasilkan hasil setelah panggilan
// Executor function passed to the
// Promise constructor as an argument
function(resolve, reject) {
// Your logic goes here...
}
5 selesai (dengan sukses/kesalahan)
Kata 'asinkron' berarti sesuatu terjadi di masa depan, bukan saat ini. Biasanya, panggilan balik hanya digunakan saat melakukan hal-hal seperti panggilan jaringan, atau mengunggah/mengunduh sesuatu, berbicara dengan database, dan sebagainya.
Meskipun
let promise = new Promise(function(resolve, reject) {
resolve("I am done");
});
_1 sangat membantu, ada kerugian besar bagi mereka juga. Kadang-kadang, kita mungkin memiliki satu callback di dalam callback lain yang ada di callback lain dan seterusnya. aku serius. Mari kita pahami "callback hell" ini dengan sebuah contoh
Cara Menghindari Callback Hell – Contoh PizzaHub
Ayo pesan pizza Veg Margherita 🍕 dari PizzaHub. Saat kami melakukan pemesanan, PizzaHub secara otomatis mendeteksi lokasi kami, menemukan restoran pizza terdekat, dan menemukan apakah pizza yang kami minta tersedia
Jika tersedia, ia mendeteksi jenis minuman apa yang kita dapatkan secara gratis beserta pizzanya, dan terakhir, memesannya
Jika pesanan berhasil dilakukan, kami menerima pesan dengan konfirmasi
Jadi bagaimana kita membuat kode ini menggunakan fungsi callback?
function orderPizza(type, name) {
// Query the pizzahub for a store
query(`/api/pizzahub/`, function(result, error){
if (!error) {
let shopId = result.shopId;
// Get the store and query pizzas
query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
if (!error) {
let pizzas = result.pizzas;
// Find if my pizza is availavle
let myPizza = pizzas.find((pizza) => {
return (pizza.type===type && pizza.name===name);
});
// Check for the free beverages
query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
if (!error) {
let beverage = result.id;
// Prepare an order
query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
if (!error) {
console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
} else {
console.log(`Bad luck, No Pizza for you today!`);
}
});
}
})
}
});
}
});
}
// Call the orderPizza method
orderPizza('veg', 'margherita');
Mari kita lihat lebih dekat fungsi
let promise = new Promise(function(resolve, reject) {
resolve("I am done");
});
2 pada kode di atas
Itu memanggil API untuk mendapatkan id toko pizza terdekat Anda. Setelah itu, ia mendapatkan daftar pizza yang tersedia di restoran itu. Ini memeriksa apakah pizza yang kami minta ditemukan dan membuat panggilan API lain untuk menemukan minuman untuk pizza itu. Akhirnya order API menempatkan pesanan
Di sini kami menggunakan panggilan balik untuk setiap panggilan API. Ini mengarahkan kita untuk menggunakan callback lain di dalam yang sebelumnya, dan seterusnya
Ini berarti kita masuk ke dalam sesuatu yang kita sebut (sangat ekspresif)
let promise = new Promise(function(resolve, reject) {
resolve("I am done");
});
3. Dan siapa yang menginginkan itu?
Demonstrasi panggilan balik neraka dan piramida
Ada beberapa cara untuk keluar dari (atau tidak masuk ke)
let promise = new Promise(function(resolve, reject) {
resolve("I am done");
});
4. Yang paling umum adalah dengan menggunakan fungsi
// Executor function passed to the
// Promise constructor as an argument
function(resolve, reject) {
// Your logic goes here...
}
3 atau
let promise = new Promise(function(resolve, reject) {
resolve("I am done");
});
6. Namun, untuk memahami fungsi
let promise = new Promise(function(resolve, reject) {
resolve("I am done");
});
6 dengan baik, Anda harus memiliki pemahaman yang adil tentang
// Executor function passed to the
// Promise constructor as an argument
function(resolve, reject) {
// Your logic goes here...
}
3s terlebih dahulu
Jadi mari kita mulai dan menyelami janji
Memahami Janji Serikat
Sekadar review, sebuah promise bisa dibuat dengan sintaks konstruktor, seperti ini
let promise = new Promise(function(resolve, reject) {
// Code to execute
});
Fungsi konstruktor mengambil fungsi sebagai argumen. Fungsi ini disebut
let promise = new Promise(function(resolve, reject) {
resolve("I am done");
});
_9
// Executor function passed to the
// Promise constructor as an argument
function(resolve, reject) {
// Your logic goes here...
}
Fungsi pelaksana mengambil dua argumen,
// Executor function passed to the
// Promise constructor as an argument
function(resolve, reject) {
// Your logic goes here...
}
6 dan
// Executor function passed to the
// Promise constructor as an argument
function(resolve, reject) {
// Your logic goes here...
}
7. Ini adalah panggilan balik yang disediakan oleh bahasa JavaScript. Logika Anda masuk ke dalam fungsi pelaksana yang berjalan secara otomatis saat
let promise = new Promise(function(resolve, reject) {
reject(new Error('Something is not right!'));
});
2 dibuat
Agar janji efektif, fungsi pelaksana harus memanggil salah satu fungsi panggilan balik,
// Executor function passed to the
// Promise constructor as an argument
function(resolve, reject) {
// Your logic goes here...
}
6 atau
// Executor function passed to the
// Promise constructor as an argument
function(resolve, reject) {
// Your logic goes here...
}
7. Kami akan mempelajari lebih lanjut tentang ini secara rinci dalam beberapa saat
Konstruktor
let promise = new Promise(function(resolve, reject) {
reject(new Error('Something is not right!'));
});
5 mengembalikan objek
let promise = new Promise(function(resolve, reject) {
reject(new Error('Something is not right!'));
});
6. Karena fungsi eksekutor perlu menangani operasi async, objek janji yang dikembalikan harus mampu menginformasikan saat eksekusi telah dimulai, diselesaikan (diselesaikan), atau disetel ulang dengan kesalahan (ditolak)
Objek
let promise = new Promise(function(resolve, reject) {
reject(new Error('Something is not right!'));
});
_6 memiliki properti internal berikut
let promise = new Promise(function(resolve, reject) {
reject(new Error('Something is not right!'));
});
_8 – Properti ini dapat memiliki nilai berikut
let promise = new Promise(function(resolve, reject) {
reject(new Error('Something is not right!'));
});
_9. Awalnya ketika fungsi pelaksana memulai eksekusilet promise = new Promise(function(resolve, reject) {
resolve("I am surely going to get resolved!");
reject(new Error('Will this be ignored?')); // ignored
resolve("Ignored?"); // ignored
});
0. Ketika janji itu diselesaikanlet promise = new Promise(function(resolve, reject) {
resolve("I am surely going to get resolved!");
reject(new Error('Will this be ignored?')); // ignored
resolve("Ignored?"); // ignored
});
1. Ketika janji itu ditolak
Janji menyatakan
2.
let promise = new Promise(function(resolve, reject) {
resolve("I am surely going to get resolved!");
reject(new Error('Will this be ignored?')); // ignored
resolve("Ignored?"); // ignored
});
2 – Properti ini dapat memiliki nilai berikut
let promise = new Promise(function(resolve, reject) {
resolve("I am surely going to get resolved!");
reject(new Error('Will this be ignored?')); // ignored
resolve("Ignored?"); // ignored
});
3. Awalnya ketika nilai let promise = new Promise(function(resolve, reject) {
reject(new Error('Something is not right!'));
});
_8 adalah let promise = new Promise(function(resolve, reject) {
reject(new Error('Something is not right!'));
});
9let promise = new Promise(function(resolve, reject) {
resolve("I am surely going to get resolved!");
reject(new Error('Will this be ignored?')); // ignored
resolve("Ignored?"); // ignored
});
6. Ketika let promise = new Promise(function(resolve, reject) {
resolve("I am surely going to get resolved!");
reject(new Error('Will this be ignored?')); // ignored
resolve("Ignored?"); // ignored
});
_7 dipanggillet promise = new Promise(function(resolve, reject) {
resolve("I am surely going to get resolved!");
reject(new Error('Will this be ignored?')); // ignored
resolve("Ignored?"); // ignored
});
8. Ketika let promise = new Promise(function(resolve, reject) {
resolve("I am surely going to get resolved!");
reject(new Error('Will this be ignored?')); // ignored
resolve("Ignored?"); // ignored
});
_9 dipanggil
Properti internal ini tidak dapat diakses oleh kode tetapi dapat diperiksa. Ini berarti bahwa kami akan dapat memeriksa nilai properti
let promise = new Promise(function(resolve, reject) {
reject(new Error('Something is not right!'));
});
8 dan
let promise = new Promise(function(resolve, reject) {
resolve("I am surely going to get resolved!");
reject(new Error('Will this be ignored?')); // ignored
resolve("Ignored?"); // ignored
});
2 menggunakan alat debugger, tetapi kami tidak akan dapat mengaksesnya secara langsung menggunakan program
Mampu memeriksa properti internal dari sebuah janji
Status janji bisa
let promise = new Promise(function(resolve, reject) {
reject(new Error('Something is not right!'));
});
_9,
let promise = new Promise(function(resolve, reject) {
resolve("I am surely going to get resolved!");
reject(new Error('Will this be ignored?')); // ignored
resolve("Ignored?"); // ignored
});
0 atau
let promise = new Promise(function(resolve, reject) {
resolve("I am surely going to get resolved!");
reject(new Error('Will this be ignored?')); // ignored
resolve("Ignored?"); // ignored
});
1. Janji yang diselesaikan atau ditolak disebut
promise.then(
(result) => {
console.log(result);
},
(error) => {
console.log(error);
}
);
5
Janji yang diselesaikan dapat dipenuhi atau ditolak
Bagaimana janji diselesaikan dan ditolak
Berikut adalah contoh janji yang akan diselesaikan (status
let promise = new Promise(function(resolve, reject) {
resolve("I am surely going to get resolved!");
reject(new Error('Will this be ignored?')); // ignored
resolve("Ignored?"); // ignored
});
0) dengan nilai
promise.then(
(result) => {
console.log(result);
},
(error) => {
console.log(error);
}
);
7 segera
let promise = new Promise(function(resolve, reject) {
resolve("I am done");
});
_
Janji di bawah ini akan ditolak (status
let promise = new Promise(function(resolve, reject) {
resolve("I am surely going to get resolved!");
reject(new Error('Will this be ignored?')); // ignored
resolve("Ignored?"); // ignored
});
_1) dengan pesan kesalahan
promise.then(
(result) => {
console.log(result);
},
(error) => {
console.log(error);
}
);
9
let promise = new Promise(function(resolve, reject) {
reject(new Error('Something is not right!'));
});
Poin penting untuk diperhatikan
Pelaksana Janji harus memanggil hanya satu // Executor function passed to the
// Promise constructor as an argument
function(resolve, reject) {
// Your logic goes here...
}
6 atau satu // Executor function passed to the
// Promise constructor as an argument
function(resolve, reject) {
// Your logic goes here...
}
7. Setelah satu status diubah (tertunda => terpenuhi atau tertunda => ditolak), itu saja. Panggilan lebih lanjut ke // Executor function passed to the
// Promise constructor as an argument
function(resolve, reject) {
// Your logic goes here...
}
_6 atau // Executor function passed to the
// Promise constructor as an argument
function(resolve, reject) {
// Your logic goes here...
}
7 akan diabaikan
let promise = new Promise(function(resolve, reject) {
resolve("I am surely going to get resolved!");
reject(new Error('Will this be ignored?')); // ignored
resolve("Ignored?"); // ignored
});
Dalam contoh di atas, hanya yang pertama diselesaikan yang akan dipanggil dan sisanya akan diabaikan
Cara menangani Janji setelah Anda membuatnya
A
// Executor function passed to the
// Promise constructor as an argument
function(resolve, reject) {
// Your logic goes here...
}
_3 menggunakan fungsi pelaksana untuk menyelesaikan tugas (kebanyakan asinkron). Fungsi konsumen (yang menggunakan hasil dari janji) harus diberi tahu saat fungsi pelaksana selesai dengan penyelesaian (sukses) atau penolakan (kesalahan)
Metode penangan,
promise.then(
(result) => {
console.log(result);
}
);
5,
promise.then(
(result) => {
console.log(result);
}
);
6 dan
promise.then(
(result) => {
console.log(result);
}
);
7, membantu membuat tautan antara pelaksana dan fungsi konsumen sehingga mereka dapat disinkronkan saat janji
// Executor function passed to the
// Promise constructor as an argument
function(resolve, reject) {
// Your logic goes here...
}
6s atau
// Executor function passed to the
// Promise constructor as an argument
function(resolve, reject) {
// Your logic goes here...
}
7s
Fungsi pelaksana dan konsumen
Cara Menggunakan promise.then(
(result) => {
console.log(result);
}
);_5 Promise Handler
Metode
promise.then(
(result) => {
console.log(result);
}
);
_5 harus dipanggil pada objek janji untuk menangani hasil (menyelesaikan) atau kesalahan (menolak)
Ini menerima dua fungsi sebagai parameter. Biasanya, metode
promise.then(
(result) => {
console.log(result);
}
);
_5 harus dipanggil dari fungsi konsumen di mana Anda ingin mengetahui hasil dari eksekusi janji
promise.then(
(result) => {
console.log(result);
},
(error) => {
console.log(error);
}
);
Jika Anda hanya tertarik pada hasil yang sukses, Anda bisa memberikan satu argumen saja, seperti ini
promise.then(
(result) => {
console.log(result);
}
);
Jika Anda hanya tertarik pada hasil kesalahan, Anda dapat memberikan
promise.then(
null,
(error) => {
console.log(error)
}
);
3 untuk argumen pertama, seperti ini
promise.then(
null,
(error) => {
console.log(error)
}
);
Namun, Anda dapat menangani kesalahan dengan cara yang lebih baik menggunakan metode
promise.then(
(result) => {
console.log(result);
}
);
6 yang akan kita lihat sebentar lagi
Mari kita lihat beberapa contoh penanganan hasil dan kesalahan menggunakan penangan
promise.then(
null,
(error) => {
console.log(error)
}
);
5 dan
promise.then(
null,
(error) => {
console.log(error)
}
);
6. Kami akan membuat pembelajaran ini sedikit lebih menyenangkan dengan beberapa permintaan asinkron nyata. Kami akan menggunakan PokeAPI untuk mendapatkan informasi tentang Pokémon dan menyelesaikan/menolaknya menggunakan Janji
Pertama, mari kita buat fungsi generik yang menerima URL PokeAPI sebagai argumen dan mengembalikan Promise. Jika panggilan API berhasil, janji yang diselesaikan dikembalikan. Janji yang ditolak dikembalikan untuk segala jenis kesalahan
Kami akan menggunakan fungsi ini dalam beberapa contoh mulai sekarang untuk mendapatkan janji dan mengerjakannya
function orderPizza(type, name) {
// Query the pizzahub for a store
query(`/api/pizzahub/`, function(result, error){
if (!error) {
let shopId = result.shopId;
// Get the store and query pizzas
query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
if (!error) {
let pizzas = result.pizzas;
// Find if my pizza is availavle
let myPizza = pizzas.find((pizza) => {
return (pizza.type===type && pizza.name===name);
});
// Check for the free beverages
query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
if (!error) {
let beverage = result.id;
// Prepare an order
query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
if (!error) {
console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
} else {
console.log(`Bad luck, No Pizza for you today!`);
}
});
}
})
}
});
}
});
}
// Call the orderPizza method
orderPizza('veg', 'margherita');
0Metode utilitas untuk mendapatkan Promise
Contoh 1. Dapatkan informasi 50 Pokemon
function orderPizza(type, name) {
// Query the pizzahub for a store
query(`/api/pizzahub/`, function(result, error){
if (!error) {
let shopId = result.shopId;
// Get the store and query pizzas
query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
if (!error) {
let pizzas = result.pizzas;
// Find if my pizza is availavle
let myPizza = pizzas.find((pizza) => {
return (pizza.type===type && pizza.name===name);
});
// Check for the free beverages
query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
if (!error) {
let beverage = result.id;
// Prepare an order
query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
if (!error) {
console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
} else {
console.log(`Bad luck, No Pizza for you today!`);
}
});
}
})
}
});
}
});
}
// Call the orderPizza method
orderPizza('veg', 'margherita');
_1
Contoh 2. Mari kita coba URL yang tidak valid
function orderPizza(type, name) {
// Query the pizzahub for a store
query(`/api/pizzahub/`, function(result, error){
if (!error) {
let shopId = result.shopId;
// Get the store and query pizzas
query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
if (!error) {
let pizzas = result.pizzas;
// Find if my pizza is availavle
let myPizza = pizzas.find((pizza) => {
return (pizza.type===type && pizza.name===name);
});
// Check for the free beverages
query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
if (!error) {
let beverage = result.id;
// Prepare an order
query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
if (!error) {
console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
} else {
console.log(`Bad luck, No Pizza for you today!`);
}
});
}
})
}
});
}
});
}
// Call the orderPizza method
orderPizza('veg', 'margherita');
_2
Cara Menggunakan promise.then(
(result) => {
console.log(result);
}
);_6 Promise Handler
Anda dapat menggunakan metode penangan ini untuk menangani kesalahan (penolakan) dari janji. Sintaks meneruskan
promise.then(
null,
(error) => {
console.log(error)
}
);
_3 sebagai argumen pertama ke
promise.then(
(result) => {
console.log(result);
}
);
5 bukanlah cara yang bagus untuk menangani kesalahan. Jadi kami memiliki
promise.then(
(result) => {
console.log(result);
}
);
_6 untuk melakukan pekerjaan yang sama dengan beberapa sintaks yang rapi
function orderPizza(type, name) {
// Query the pizzahub for a store
query(`/api/pizzahub/`, function(result, error){
if (!error) {
let shopId = result.shopId;
// Get the store and query pizzas
query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
if (!error) {
let pizzas = result.pizzas;
// Find if my pizza is availavle
let myPizza = pizzas.find((pizza) => {
return (pizza.type===type && pizza.name===name);
});
// Check for the free beverages
query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
if (!error) {
let beverage = result.id;
// Prepare an order
query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
if (!error) {
console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
} else {
console.log(`Bad luck, No Pizza for you today!`);
}
});
}
})
}
});
}
});
}
// Call the orderPizza method
orderPizza('veg', 'margherita');
_3
Jika kita melontarkan Error seperti
function orderPizza(type, name) {
// Query the pizzahub for a store
query(`/api/pizzahub/`, function(result, error){
if (!error) {
let shopId = result.shopId;
// Get the store and query pizzas
query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
if (!error) {
let pizzas = result.pizzas;
// Find if my pizza is availavle
let myPizza = pizzas.find((pizza) => {
return (pizza.type===type && pizza.name===name);
});
// Check for the free beverages
query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
if (!error) {
let beverage = result.id;
// Prepare an order
query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
if (!error) {
console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
} else {
console.log(`Bad luck, No Pizza for you today!`);
}
});
}
})
}
});
}
});
}
// Call the orderPizza method
orderPizza('veg', 'margherita');
_01 alih-alih memanggil
// Executor function passed to the
// Promise constructor as an argument
function(resolve, reject) {
// Your logic goes here...
}
7 dari pelaksana dan penangan janji, itu akan tetap diperlakukan sebagai penolakan. Artinya ini akan ditangkap oleh metode penangan ________69______6
Ini sama untuk semua pengecualian sinkron yang terjadi dalam fungsi pelaksana dan penangan janji
Berikut adalah contoh di mana itu akan diperlakukan seperti penolakan dan metode penangan
promise.then(
null,
(error) => {
console.log(error)
}
);
6 akan dipanggil
function orderPizza(type, name) {
// Query the pizzahub for a store
query(`/api/pizzahub/`, function(result, error){
if (!error) {
let shopId = result.shopId;
// Get the store and query pizzas
query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
if (!error) {
let pizzas = result.pizzas;
// Find if my pizza is availavle
let myPizza = pizzas.find((pizza) => {
return (pizza.type===type && pizza.name===name);
});
// Check for the free beverages
query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
if (!error) {
let beverage = result.id;
// Prepare an order
query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
if (!error) {
console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
} else {
console.log(`Bad luck, No Pizza for you today!`);
}
});
}
})
}
});
}
});
}
// Call the orderPizza method
orderPizza('veg', 'margherita');
_4
Cara Menggunakan promise.then(
(result) => {
console.log(result);
}
);_7 Promise Handler
Handler
promise.then(
(result) => {
console.log(result);
}
);
_7 melakukan pembersihan seperti menghentikan loader, menutup koneksi langsung, dan seterusnya. Metode
function orderPizza(type, name) {
// Query the pizzahub for a store
query(`/api/pizzahub/`, function(result, error){
if (!error) {
let shopId = result.shopId;
// Get the store and query pizzas
query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
if (!error) {
let pizzas = result.pizzas;
// Find if my pizza is availavle
let myPizza = pizzas.find((pizza) => {
return (pizza.type===type && pizza.name===name);
});
// Check for the free beverages
query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
if (!error) {
let beverage = result.id;
// Prepare an order
query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
if (!error) {
console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
} else {
console.log(`Bad luck, No Pizza for you today!`);
}
});
}
})
}
});
}
});
}
// Call the orderPizza method
orderPizza('veg', 'margherita');
_07 akan dipanggil terlepas dari apakah janji
// Executor function passed to the
// Promise constructor as an argument
function(resolve, reject) {
// Your logic goes here...
}
6s atau
// Executor function passed to the
// Promise constructor as an argument
function(resolve, reject) {
// Your logic goes here...
}
7s. Itu melewati hasil atau kesalahan ke penangan berikutnya yang dapat memanggil a. lalu() atau. tangkap() lagi
Berikut adalah contoh yang akan membantu Anda memahami ketiga metode secara bersamaan
function orderPizza(type, name) {
// Query the pizzahub for a store
query(`/api/pizzahub/`, function(result, error){
if (!error) {
let shopId = result.shopId;
// Get the store and query pizzas
query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
if (!error) {
let pizzas = result.pizzas;
// Find if my pizza is availavle
let myPizza = pizzas.find((pizza) => {
return (pizza.type===type && pizza.name===name);
});
// Check for the free beverages
query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
if (!error) {
let beverage = result.id;
// Prepare an order
query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
if (!error) {
console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
} else {
console.log(`Bad luck, No Pizza for you today!`);
}
});
}
})
}
});
}
});
}
// Call the orderPizza method
orderPizza('veg', 'margherita');
_5
Untuk menjelaskan sedikit lebih jauh
- Metode
promise.then(
(result) => {
console.log(result);
}
);
_7 membuat memuat function orderPizza(type, name) {
// Query the pizzahub for a store
query(`/api/pizzahub/`, function(result, error){
if (!error) {
let shopId = result.shopId;
// Get the store and query pizzas
query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
if (!error) {
let pizzas = result.pizzas;
// Find if my pizza is availavle
let myPizza = pizzas.find((pizza) => {
return (pizza.type===type && pizza.name===name);
});
// Check for the free beverages
query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
if (!error) {
let beverage = result.id;
// Prepare an order
query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
if (!error) {
console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
} else {
console.log(`Bad luck, No Pizza for you today!`);
}
});
}
})
}
});
}
});
}
// Call the orderPizza method
orderPizza('veg', 'margherita');
11 - Jika janji diselesaikan, metode
promise.then(
(result) => {
console.log(result);
}
);
5 akan dipanggil. Jika janji ditolak dengan kesalahan, metode promise.then(
(result) => {
console.log(result);
}
);
6 akan dipanggil. promise.then(
(result) => {
console.log(result);
}
);
_7 akan dipanggil terlepas dari penyelesaian atau penolakan
Apa itu Rantai Janji?
Panggilan
function orderPizza(type, name) {
// Query the pizzahub for a store
query(`/api/pizzahub/`, function(result, error){
if (!error) {
let shopId = result.shopId;
// Get the store and query pizzas
query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
if (!error) {
let pizzas = result.pizzas;
// Find if my pizza is availavle
let myPizza = pizzas.find((pizza) => {
return (pizza.type===type && pizza.name===name);
});
// Check for the free beverages
query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
if (!error) {
let beverage = result.id;
// Prepare an order
query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
if (!error) {
console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
} else {
console.log(`Bad luck, No Pizza for you today!`);
}
});
}
})
}
});
}
});
}
// Call the orderPizza method
orderPizza('veg', 'margherita');
_15 selalu mengembalikan janji. Janji ini akan memiliki
let promise = new Promise(function(resolve, reject) {
reject(new Error('Something is not right!'));
});
_8 sebagai
let promise = new Promise(function(resolve, reject) {
reject(new Error('Something is not right!'));
});
9 dan
let promise = new Promise(function(resolve, reject) {
resolve("I am surely going to get resolved!");
reject(new Error('Will this be ignored?')); // ignored
resolve("Ignored?"); // ignored
});
2 sebagai
let promise = new Promise(function(resolve, reject) {
resolve("I am surely going to get resolved!");
reject(new Error('Will this be ignored?')); // ignored
resolve("Ignored?"); // ignored
});
3. Ini memungkinkan kita untuk memanggil metode
promise.then(
null,
(error) => {
console.log(error)
}
);
_5 berikutnya pada janji baru
Ketika metode
promise.then(
null,
(error) => {
console.log(error)
}
);
_5 pertama mengembalikan nilai, metode
promise.then(
null,
(error) => {
console.log(error)
}
);
5 berikutnya dapat menerimanya. Yang kedua sekarang dapat diteruskan ke yang ketiga
promise.then(
(result) => {
console.log(result);
}
);
5 dan seterusnya. Ini membentuk rangkaian metode
promise.then(
null,
(error) => {
console.log(error)
}
);
_5 untuk menyampaikan janji. Fenomena ini disebut
function orderPizza(type, name) {
// Query the pizzahub for a store
query(`/api/pizzahub/`, function(result, error){
if (!error) {
let shopId = result.shopId;
// Get the store and query pizzas
query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
if (!error) {
let pizzas = result.pizzas;
// Find if my pizza is availavle
let myPizza = pizzas.find((pizza) => {
return (pizza.type===type && pizza.name===name);
});
// Check for the free beverages
query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
if (!error) {
let beverage = result.id;
// Prepare an order
query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
if (!error) {
console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
} else {
console.log(`Bad luck, No Pizza for you today!`);
}
});
}
})
}
});
}
});
}
// Call the orderPizza method
orderPizza('veg', 'margherita');
_25
Rantai Janji
Ini sebuah contoh
function orderPizza(type, name) {
// Query the pizzahub for a store
query(`/api/pizzahub/`, function(result, error){
if (!error) {
let shopId = result.shopId;
// Get the store and query pizzas
query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
if (!error) {
let pizzas = result.pizzas;
// Find if my pizza is availavle
let myPizza = pizzas.find((pizza) => {
return (pizza.type===type && pizza.name===name);
});
// Check for the free beverages
query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
if (!error) {
let beverage = result.id;
// Prepare an order
query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
if (!error) {
console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
} else {
console.log(`Bad luck, No Pizza for you today!`);
}
});
}
})
}
});
}
});
}
// Call the orderPizza method
orderPizza('veg', 'margherita');
_6
Di sini pertama-tama kita mendapatkan janji yang diselesaikan dan kemudian mengekstrak URL untuk mencapai Pokemon pertama. Kami kemudian mengembalikan nilai itu dan itu akan diteruskan sebagai janji ke yang berikutnya. kemudian() fungsi penangan. Oleh karena itu keluaran,
function orderPizza(type, name) {
// Query the pizzahub for a store
query(`/api/pizzahub/`, function(result, error){
if (!error) {
let shopId = result.shopId;
// Get the store and query pizzas
query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
if (!error) {
let pizzas = result.pizzas;
// Find if my pizza is availavle
let myPizza = pizzas.find((pizza) => {
return (pizza.type===type && pizza.name===name);
});
// Check for the free beverages
query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
if (!error) {
let beverage = result.id;
// Prepare an order
query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
if (!error) {
console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
} else {
console.log(`Bad luck, No Pizza for you today!`);
}
});
}
})
}
});
}
});
}
// Call the orderPizza method
orderPizza('veg', 'margherita');
_7
Metode
promise.then(
null,
(error) => {
console.log(error)
}
);
_5 juga dapat mengembalikan
- Sebuah nilai (kami telah melihat ini)
- Sebuah janji baru
Itu juga bisa melempar kesalahan
Berikut adalah contoh di mana kami telah membuat rantai janji dengan metode
promise.then(
null,
(error) => {
console.log(error)
}
);
5 yang mengembalikan hasil dan janji baru
function orderPizza(type, name) {
// Query the pizzahub for a store
query(`/api/pizzahub/`, function(result, error){
if (!error) {
let shopId = result.shopId;
// Get the store and query pizzas
query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
if (!error) {
let pizzas = result.pizzas;
// Find if my pizza is availavle
let myPizza = pizzas.find((pizza) => {
return (pizza.type===type && pizza.name===name);
});
// Check for the free beverages
query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
if (!error) {
let beverage = result.id;
// Prepare an order
query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
if (!error) {
console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
} else {
console.log(`Bad luck, No Pizza for you today!`);
}
});
}
})
}
});
}
});
}
// Call the orderPizza method
orderPizza('veg', 'margherita');
_8
Pada panggilan
promise.then(
null,
(error) => {
console.log(error)
}
);
_5 pertama, kami mengekstrak URL dan mengembalikannya sebagai nilai. URL ini akan diteruskan ke panggilan
promise.then(
null,
(error) => {
console.log(error)
}
);
5 kedua tempat kami mengembalikan janji baru menggunakan URL itu sebagai argumen
Janji ini akan diselesaikan dan diteruskan ke rantai tempat kami mendapatkan informasi tentang Pokemon. Inilah hasilnya
Output dari panggilan berantai janji
Jika ada kesalahan atau penolakan janji, the. metode catch dalam rantai akan dipanggil
Poin yang perlu diperhatikan. Memanggil
promise.then(
null,
(error) => {
console.log(error)
}
);
5 berkali-kali tidak membentuk rangkaian Promise. Anda mungkin akhirnya melakukan hal seperti ini hanya untuk memasukkan bug ke dalam kode
function orderPizza(type, name) {
// Query the pizzahub for a store
query(`/api/pizzahub/`, function(result, error){
if (!error) {
let shopId = result.shopId;
// Get the store and query pizzas
query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
if (!error) {
let pizzas = result.pizzas;
// Find if my pizza is availavle
let myPizza = pizzas.find((pizza) => {
return (pizza.type===type && pizza.name===name);
});
// Check for the free beverages
query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
if (!error) {
let beverage = result.id;
// Prepare an order
query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
if (!error) {
console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
} else {
console.log(`Bad luck, No Pizza for you today!`);
}
});
}
})
}
});
}
});
}
// Call the orderPizza method
orderPizza('veg', 'margherita');
_9
Kami memanggil metode
promise.then(
null,
(error) => {
console.log(error)
}
);
_5 tiga kali dengan janji yang sama, tetapi kami tidak melewatkan janji tersebut. Ini berbeda dari rantai janji. Dalam contoh di atas, hasilnya akan berupa kesalahan
Cara Menangani Banyak Janji
Terlepas dari metode penangan (. kemudian,. menangkap, dan. terakhir), ada enam metode statis yang tersedia di Promise API. Empat metode pertama menerima serangkaian janji dan menjalankannya secara paralel
- Janji. semua
- Janji. setiap
- Janji. allSettled
- Janji. balapan
- Janji. menyelesaikan
- Janji. menolak
Mari kita bahas satu per satu
Janji. semua() metode
function orderPizza(type, name) {
// Query the pizzahub for a store
query(`/api/pizzahub/`, function(result, error){
if (!error) {
let shopId = result.shopId;
// Get the store and query pizzas
query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
if (!error) {
let pizzas = result.pizzas;
// Find if my pizza is availavle
let myPizza = pizzas.find((pizza) => {
return (pizza.type===type && pizza.name===name);
});
// Check for the free beverages
query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
if (!error) {
let beverage = result.id;
// Prepare an order
query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
if (!error) {
console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
} else {
console.log(`Bad luck, No Pizza for you today!`);
}
});
}
})
}
});
}
});
}
// Call the orderPizza method
orderPizza('veg', 'margherita');
_32 menerima kumpulan (misalnya, array) dari promise sebagai argumen dan mengeksekusinya secara paralel
Metode ini menunggu semua janji untuk diselesaikan dan mengembalikan rangkaian hasil janji. Jika salah satu janji ditolak atau dieksekusi gagal karena kesalahan, semua hasil janji lainnya akan diabaikan
Mari buat tiga janji untuk mendapatkan informasi tentang tiga Pokémon
let promise = new Promise(function(resolve, reject) {
// Code to execute
});
_0
Gunakan Janji. all() metode dengan melewatkan array janji
let promise = new Promise(function(resolve, reject) {
// Code to execute
});
_1
Keluaran
Seperti yang Anda lihat di keluaran, hasil dari semua janji dikembalikan. Waktu untuk mengeksekusi semua janji sama dengan waktu maksimal yang dibutuhkan janji untuk dijalankan
Janji. apapun() metode
function orderPizza(type, name) {
// Query the pizzahub for a store
query(`/api/pizzahub/`, function(result, error){
if (!error) {
let shopId = result.shopId;
// Get the store and query pizzas
query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
if (!error) {
let pizzas = result.pizzas;
// Find if my pizza is availavle
let myPizza = pizzas.find((pizza) => {
return (pizza.type===type && pizza.name===name);
});
// Check for the free beverages
query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
if (!error) {
let beverage = result.id;
// Prepare an order
query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
if (!error) {
console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
} else {
console.log(`Bad luck, No Pizza for you today!`);
}
});
}
})
}
});
}
});
}
// Call the orderPizza method
orderPizza('veg', 'margherita');
_33 - Mirip dengan metode
function orderPizza(type, name) {
// Query the pizzahub for a store
query(`/api/pizzahub/`, function(result, error){
if (!error) {
let shopId = result.shopId;
// Get the store and query pizzas
query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
if (!error) {
let pizzas = result.pizzas;
// Find if my pizza is availavle
let myPizza = pizzas.find((pizza) => {
return (pizza.type===type && pizza.name===name);
});
// Check for the free beverages
query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
if (!error) {
let beverage = result.id;
// Prepare an order
query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
if (!error) {
console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
} else {
console.log(`Bad luck, No Pizza for you today!`);
}
});
}
})
}
});
}
});
}
// Call the orderPizza method
orderPizza('veg', 'margherita');
34,
function orderPizza(type, name) {
// Query the pizzahub for a store
query(`/api/pizzahub/`, function(result, error){
if (!error) {
let shopId = result.shopId;
// Get the store and query pizzas
query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
if (!error) {
let pizzas = result.pizzas;
// Find if my pizza is availavle
let myPizza = pizzas.find((pizza) => {
return (pizza.type===type && pizza.name===name);
});
// Check for the free beverages
query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
if (!error) {
let beverage = result.id;
// Prepare an order
query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
if (!error) {
console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
} else {
console.log(`Bad luck, No Pizza for you today!`);
}
});
}
})
}
});
}
});
}
// Call the orderPizza method
orderPizza('veg', 'margherita');
35 juga menerima serangkaian janji untuk mengeksekusinya secara paralel. Metode ini tidak menunggu semua janji diselesaikan. Itu dilakukan ketika salah satu dari janji-janji itu diselesaikan
let promise = new Promise(function(resolve, reject) {
// Code to execute
});
_2
Outputnya akan menjadi hasil dari salah satu janji yang diselesaikan
Janji. metode allSettled()
function orderPizza(type, name) {
// Query the pizzahub for a store
query(`/api/pizzahub/`, function(result, error){
if (!error) {
let shopId = result.shopId;
// Get the store and query pizzas
query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
if (!error) {
let pizzas = result.pizzas;
// Find if my pizza is availavle
let myPizza = pizzas.find((pizza) => {
return (pizza.type===type && pizza.name===name);
});
// Check for the free beverages
query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
if (!error) {
let beverage = result.id;
// Prepare an order
query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
if (!error) {
console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
} else {
console.log(`Bad luck, No Pizza for you today!`);
}
});
}
})
}
});
}
});
}
// Call the orderPizza method
orderPizza('veg', 'margherita');
_36 - Metode ini menunggu semua janji untuk diselesaikan (diselesaikan/ditolak) dan mengembalikan hasilnya sebagai array objek. Hasilnya akan berisi status (terpenuhi/ditolak) dan nilai, jika terpenuhi. Dalam kasus status ditolak, itu akan mengembalikan alasan kesalahan
Berikut adalah contoh dari semua janji yang terpenuhi
let promise = new Promise(function(resolve, reject) {
// Code to execute
});
_3
Keluaran
Jika salah satu dari janji itu menolak, katakanlah, janji_1,
let promise = new Promise(function(resolve, reject) {
// Code to execute
});
_4
Janji. ras() metode
function orderPizza(type, name) {
// Query the pizzahub for a store
query(`/api/pizzahub/`, function(result, error){
if (!error) {
let shopId = result.shopId;
// Get the store and query pizzas
query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
if (!error) {
let pizzas = result.pizzas;
// Find if my pizza is availavle
let myPizza = pizzas.find((pizza) => {
return (pizza.type===type && pizza.name===name);
});
// Check for the free beverages
query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
if (!error) {
let beverage = result.id;
// Prepare an order
query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
if (!error) {
console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
} else {
console.log(`Bad luck, No Pizza for you today!`);
}
});
}
})
}
});
}
});
}
// Call the orderPizza method
orderPizza('veg', 'margherita');
_37 – Menunggu janji pertama (tercepat) untuk diselesaikan, dan mengembalikan hasil/kesalahan yang sesuai
let promise = new Promise(function(resolve, reject) {
// Code to execute
});
_5
Keluarkan janji tercepat yang diselesaikan
Janji. menyelesaikan / menolak metode
function orderPizza(type, name) {
// Query the pizzahub for a store
query(`/api/pizzahub/`, function(result, error){
if (!error) {
let shopId = result.shopId;
// Get the store and query pizzas
query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
if (!error) {
let pizzas = result.pizzas;
// Find if my pizza is availavle
let myPizza = pizzas.find((pizza) => {
return (pizza.type===type && pizza.name===name);
});
// Check for the free beverages
query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
if (!error) {
let beverage = result.id;
// Prepare an order
query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
if (!error) {
console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
} else {
console.log(`Bad luck, No Pizza for you today!`);
}
});
}
})
}
});
}
});
}
// Call the orderPizza method
orderPizza('veg', 'margherita');
_38 – Menyelesaikan janji dengan nilai yang diberikan padanya. Itu sama dengan yang berikut ini
let promise = new Promise(function(resolve, reject) {
// Code to execute
});
_6
function orderPizza(type, name) {
// Query the pizzahub for a store
query(`/api/pizzahub/`, function(result, error){
if (!error) {
let shopId = result.shopId;
// Get the store and query pizzas
query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
if (!error) {
let pizzas = result.pizzas;
// Find if my pizza is availavle
let myPizza = pizzas.find((pizza) => {
return (pizza.type===type && pizza.name===name);
});
// Check for the free beverages
query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
if (!error) {
let beverage = result.id;
// Prepare an order
query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
if (!error) {
console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
} else {
console.log(`Bad luck, No Pizza for you today!`);
}
});
}
})
}
});
}
});
}
// Call the orderPizza method
orderPizza('veg', 'margherita');
_39 – Menolak janji dengan kesalahan diteruskan ke sana. Itu sama dengan yang berikut ini
let promise = new Promise(function(resolve, reject) {
// Code to execute
});
7Bisakah kita menulis ulang contoh PizzaHub dengan Janji?
Tentu, mari kita lakukan. Mari kita asumsikan bahwa metode
function orderPizza(type, name) {
// Query the pizzahub for a store
query(`/api/pizzahub/`, function(result, error){
if (!error) {
let shopId = result.shopId;
// Get the store and query pizzas
query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
if (!error) {
let pizzas = result.pizzas;
// Find if my pizza is availavle
let myPizza = pizzas.find((pizza) => {
return (pizza.type===type && pizza.name===name);
});
// Check for the free beverages
query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
if (!error) {
let beverage = result.id;
// Prepare an order
query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
if (!error) {
console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
} else {
console.log(`Bad luck, No Pizza for you today!`);
}
});
}
})
}
});
}
});
}
// Call the orderPizza method
orderPizza('veg', 'margherita');
_40 akan mengembalikan sebuah promise. Berikut adalah contoh metode query(). Dalam kehidupan nyata, metode ini dapat berbicara dengan database dan mengembalikan hasil. Dalam hal ini, kodenya sangat keras tetapi melayani tujuan yang sama
let promise = new Promise(function(resolve, reject) {
// Code to execute
});
_8
Berikutnya adalah refactoring
let promise = new Promise(function(resolve, reject) {
resolve("I am done");
});
_4 kami. Untuk melakukannya, pertama, kita akan membuat beberapa fungsi logika
let promise = new Promise(function(resolve, reject) {
// Code to execute
});
_9
Gunakan fungsi ini untuk membuat janji yang diperlukan. Di sinilah Anda harus membandingkan dengan
let promise = new Promise(function(resolve, reject) {
resolve("I am done");
});
_4 contoh. Ini sangat bagus dan elegan
// Executor function passed to the
// Promise constructor as an argument
function(resolve, reject) {
// Your logic goes here...
}
0
Terakhir, panggil metode orderPizza() dengan meneruskan jenis dan nama pizza, seperti ini
// Executor function passed to the
// Promise constructor as an argument
function(resolve, reject) {
// Your logic goes here...
}
1Apa selanjutnya dari sini?
Jika Anda di sini dan telah membaca sebagian besar baris di atas, selamat. Anda sekarang harus memiliki pemahaman yang lebih baik tentang Janji JavaScript. Semua contoh yang digunakan dalam artikel ini ada di repositori GitHub ini
Selanjutnya, Anda harus mempelajari tentang fungsi
let promise = new Promise(function(resolve, reject) {
resolve("I am done");
});
_6 dalam JavaScript yang menyederhanakan lebih jauh. Konsep janji JavaScript paling baik dipelajari dengan menulis contoh kecil dan membangun di atasnya
Terlepas dari framework atau library (Angular, React, Vue, dan sebagainya) yang kami gunakan, operasi async tidak dapat dihindari. Ini berarti bahwa kita harus memahami janji untuk membuat semuanya berjalan lebih baik
Juga, saya yakin Anda akan menemukan penggunaan metode
function orderPizza(type, name) {
// Query the pizzahub for a store
query(`/api/pizzahub/`, function(result, error){
if (!error) {
let shopId = result.shopId;
// Get the store and query pizzas
query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
if (!error) {
let pizzas = result.pizzas;
// Find if my pizza is availavle
let myPizza = pizzas.find((pizza) => {
return (pizza.type===type && pizza.name===name);
});
// Check for the free beverages
query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
if (!error) {
let beverage = result.id;
// Prepare an order
query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
if (!error) {
console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
} else {
console.log(`Bad luck, No Pizza for you today!`);
}
});
}
})
}
});
}
});
}
// Call the orderPizza method
orderPizza('veg', 'margherita');
44 jauh lebih mudah sekarang
// Executor function passed to the
// Promise constructor as an argument
function(resolve, reject) {
// Your logic goes here...
}
_2
- Metode
function orderPizza(type, name) {
// Query the pizzahub for a store
query(`/api/pizzahub/`, function(result, error){
if (!error) {
let shopId = result.shopId;
// Get the store and query pizzas
query(`/api/pizzahub/pizza/${shopid}`, function(result, error){
if (!error) {
let pizzas = result.pizzas;
// Find if my pizza is availavle
let myPizza = pizzas.find((pizza) => {
return (pizza.type===type && pizza.name===name);
});
// Check for the free beverages
query(`/api/pizzahub/beverages/${myPizza.id}`, function(result, error){
if (!error) {
let beverage = result.id;
// Prepare an order
query(`/api/order`, {'type': type, 'name': name, 'beverage': beverage}, function(result, error){
if (!error) {
console.log(`Your order of ${type} ${name} with ${beverage} has been placed`);
} else {
console.log(`Bad luck, No Pizza for you today!`);
}
});
}
})
}
});
}
});
}
// Call the orderPizza method
orderPizza('veg', 'margherita');
_44 mengembalikan janji. Jadi kita bisa memanggil metode penangan promise.then(
null,
(error) => {
console.log(error)
}
);
_5 di atasnya - Selebihnya adalah tentang rantai janji yang kita pelajari di artikel ini
Sebelum kita berakhir
Terima kasih telah membaca sejauh ini. Mari terhubung. Anda dapat @ saya di Twitter (@tapasadhikary) dengan komentar
Anda mungkin juga menyukai artikel lainnya ini
- JavaScript tidak terdefinisi dan nol. Mari kita bicarakan untuk terakhir kalinya
- JavaScript. Perbandingan kesetaraan dengan ==, === dan Objek. adalah
- Kata Kunci `ini` JavaScript + 5 Aturan Pengikatan Kunci Dijelaskan untuk Pemula JS
- JavaScript TypeOf – Cara Memeriksa Jenis Variabel atau Objek di JS
Itu saja untuk saat ini. Sampai jumpa lagi dengan artikel saya berikutnya segera. Sampai saat itu, tolong jaga dirimu baik-baik
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
TAPAS ADHIKARYPenulis. YouTuber. Pencipta. Mentor
Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih
Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai
Bagaimana cara memeriksa apakah Janji diselesaikan JavaScript?
resolve() method di JS mengembalikan objek Promise yang diselesaikan dengan nilai yang diberikan.
Bagaimana cara memeriksa Janji dalam JavaScript?
Untuk memeriksa apakah suatu nilai menjanjikan, periksa apakah jenis nilai adalah objek dan memiliki properti bernama fungsi tipe . g. typeof p === 'objek' && typeof p. lalu === 'fungsi'. Jika kedua kondisi mengembalikan true , nilainya adalah janji.
Bagaimana saya tahu jika Janji saya diselesaikan?
Tempat terbaik untuk mengetahui apakah sebuah janji diselesaikan adalah di. kemudian() . Menguji apakah Promise dipenuhi akan membuat loop polling yang kemungkinan besar salah arah. async/menunggu adalah konstruksi yang bagus jika Anda ingin membuat kode async secara sinkron.
Bagaimana Anda memeriksa apakah semua Janji telah diselesaikan?
Janji . all() method dapat digunakan untuk memeriksa apakah semua Janji telah berhasil dipenuhi. Itu menerima objek yang dapat diubah (mis. g. array) dari beberapa Janji dan mengembalikan Janji. Janji yang dikembalikan diselesaikan jika semua Janji input yang diteruskan ke sana diselesaikan.
