"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 objectAnda 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
Menunggu Timeout
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 "
Menunggu file
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 sendirianJanji 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 sebagainyaPenyelesaian 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...
}
7Anda 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 contohCara 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 atasItu 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? 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 dahuluJadi mari kita mulai dan menyelami janji
Memahami Janji SerikatSekadar 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 dibuatAgar 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 saatKonstruktor
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
_8 – Properti ini dapat memiliki nilai berikutlet 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] { reject[new Error['Something is not right!']]; }];
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 ditolaklet 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.
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
3. Awalnya ketika nilailet 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 adalahlet promise = new Promise[function[resolve, reject] { reject[new Error['Something is not right!']]; }];
9let promise = new Promise[function[resolve, reject] { reject[new Error['Something is not right!']]; }];
6. Ketikalet 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. Ketikalet 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 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 }];
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 programStatus 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];
}
];
5Bagaimana 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 segeralet 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];
}
];
9let promise = new Promise[function[resolve, reject] {
reject[new Error['Something is not right!']];
}];
Poin penting untuk diperhatikan
Pelaksana Janji harus memanggil hanya satu6 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// Executor function passed to the // Promise constructor as an argument function[resolve, reject] { // Your logic goes here... }
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 membuatnyaA
// 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...
}
7sCara Menggunakan promise.then[
[result] => {
console.log[result];
}
];
_5 Promise Handler
promise.then[
[result] => {
console.log[result];
}
];
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 janjipromise.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 inipromise.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 lagiMari 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 JanjiPertama, 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 PromiseContoh 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'];
_1Contoh 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'];
_2Cara Menggunakan promise.then[
[result] => {
console.log[result];
}
];
_6 Promise Handler
promise.then[
[result] => {
console.log[result];
}
];
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 rapifunction 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'];
_3Jika 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______6Ini 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 dipanggilfunction 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'];
_4Cara Menggunakan promise.then[
[result] => {
console.log[result];
}
];
_7 Promise Handler
promise.then[
[result] => {
console.log[result];
}
];
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[] lagiBerikut 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'];
_5Untuk menjelaskan sedikit lebih jauh
- Metode
_7 membuat memuatpromise.then[ [result] => { console.log[result]; } ];
11function 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'];
- Jika janji diselesaikan, metode
5 akan dipanggil. Jika janji ditolak dengan kesalahan, metodepromise.then[ [result] => { console.log[result]; } ];
6 akan dipanggil.promise.then[ [result] => { console.log[result]; } ];
_7 akan dipanggil terlepas dari penyelesaian atau penolakanpromise.then[ [result] => { console.log[result]; } ];
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 baruKetika 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'];
_25Ini 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'];
_6Di 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'];
_7Metode
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 barufunction 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'];
_8Pada 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 argumenJanji ini akan diselesaikan dan diteruskan ke rantai tempat kami mendapatkan informasi tentang Pokemon. Inilah hasilnya
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 kodefunction 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'];
_9Kami 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 kesalahanTerlepas 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 paralelMetode 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
}];
_0Gunakan Janji. all[] metode dengan melewatkan array janji
let promise = new Promise[function[resolve, reject] {
// Code to execute
}];
_1Keluaran
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 diselesaikanlet promise = new Promise[function[resolve, reject] {
// Code to execute
}];
_2Outputnya 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 kesalahanBerikut adalah contoh dari semua janji yang terpenuhi
let promise = new Promise[function[resolve, reject] {
// Code to execute
}];
_3Keluaran
Jika salah satu dari janji itu menolak, katakanlah, janji_1,
let promise = new Promise[function[resolve, reject] {
// Code to execute
}];
_4Janji. 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 sesuailet promise = new Promise[function[resolve, reject] {
// Code to execute
}];
_5Keluarkan 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 inilet promise = new Promise[function[resolve, reject] {
// Code to execute
}];
_6function 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 inilet 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 samalet promise = new Promise[function[resolve, reject] {
// Code to execute
}];
_8Berikutnya adalah refactoring
let promise = new Promise[function[resolve, reject] {
resolve["I am done"];
}];
_4 kami. Untuk melakukannya, pertama, kita akan membuat beberapa fungsi logikalet promise = new Promise[function[resolve, reject] {
// Code to execute
}];
_9Gunakan 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...
}
0Terakhir, 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 atasnyaTerlepas 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
_44 mengembalikan janji. Jadi kita bisa memanggil metode penanganfunction 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 di atasnyapromise.then[ null, [error] => { console.log[error] } ];
- Selebihnya adalah tentang rantai janji yang kita pelajari di artikel ini
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
Penulis. 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