Janji mungkin adalah hal yang paling rumit dan membuat frustrasi di dunia Javascript (tidak memperhitungkan Javascript itu sendiri). Meskipun konsepnya sebenarnya tidak terlalu sulit untuk dipahami, hal-hal asinkron dapat membuat pemrogram senior sekalipun melafalkan kosakata terlarang mereka dari kelas tiga
Tindakan loop dapat bervariasi, dan di dalam loop, ada tindakan berbeda yang mungkin kami kerjakan. Beberapa tindakan ini mungkin sinkron dan beberapa mungkin asinkron
Untuk skenario tindakan asinkron dalam loop (terutama untuk loop), kita perlu memastikan bahwa kita mengizinkannya selesai sebelum kita dapat melanjutkan ke iterasi berikutnya
Pada artikel ini, kami akan merinci cara menunggu loop selesai di Node.js. js (JavaScript) menggunakan dua metode
Memperkenalkan Janji
Sebelum kita pindah ke Promises, kita perlu membahas callback. Callback adalah fungsi yang diteruskan ke fungsi lain dan dijalankan saat kode tertentu dijalankan, sehingga fungsi yang akan diteruskan harus menyelesaikan tindakannya sebelum digunakan oleh fungsi lain
Ilustrasi sederhana dapat dilihat di bawah ini di mana kita melewatkan fungsi help sebagai argumen dari fungsi
Checking the database for the tool passed
The dgf documentation is here thus
0
function help(tool) {
console.log("The " + tool + " documentation is here thus");
}
function cli(callback) {
let tool = prompt("Need Help? Enter Tool Name: ");
console.log("Checking the database for the tool passed");
callback(tool);
}
cli(help);
_
Saat kami melewati
Checking the database for the tool passed
The dgf documentation is here thus
_1 di dalam prompt, output kami menjadi
Checking the database for the tool passed
The dgf documentation is here thus
JavaScript bersifat asinkron sehingga setiap tugas yang berjalan lama akan diantrekan, dan akan beralih ke tugas lain. Oleh karena itu, dengan tugas seperti panggilan jaringan, kita dapat menangani
Checking the database for the tool passed
The dgf documentation is here thus
2 nilai menggunakan panggilan balik
BACA JUGA. Bagaimana cara menggunakan JavaScript toLowerCase()?
Namun, kode dengan banyak panggilan balik dapat dengan mudah menjadi berantakan dan sulit dipertahankan. Fenomena ini disebut callback hell. Untuk mengatasi hal ini, Promises_ sangat membantu dan lebih baik untuk digunakan
Iklan
Objek
Checking the database for the tool passed
The dgf documentation is here thus
4 merepresentasikan penyelesaian akhir atau kegagalan operasi asinkron JavaScript dan nilai yang dihasilkannya, dan mengembalikan
Checking the database for the tool passed
The dgf documentation is here thus
4 yang akan memberikan nilai hasil saat dibutuhkan dalam kode nanti
Untuk mengilustrasikan Promises, kita dapat membuat kode yang mengambil URL dan memproses responsnya.
Checking the database for the tool passed
The dgf documentation is here thus
7 menangani situasi di mana kode berhasil, dan
Checking the database for the tool passed
The dgf documentation is here thus
8 menendang di mana kode gagal
function getData(url) {
return new Promise((resolve, reject) => {
if (!url) {
reject("No URL provided");
}
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.send();
xhr.onload = function () {
if (xhr.status === 200) {
resolve(xhr.responseText);
} else {
reject(xhr.status);
}
};
});
}
const url = prompt("Enter a URL");
getData(url)
.then((result) => {
console.log("Success!"); // Runs on success
console.log(result);
}).catch(status => {
console.log(`An error with status code ${status} occurred: `); // Runs on error
});
_
Saat kita melewatkan
Checking the database for the tool passed
The dgf documentation is here thus
_9 sebagai input ke prompt, outputnya menjadi
Success!
{"page":2,"per_page":6,"total":12,"total_pages":2,"data":
...
function getData(url) {
return new Promise((resolve, reject) => {
if (!url) {
reject("No URL provided");
}
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.send();
xhr.onload = function () {
if (xhr.status === 200) {
resolve(xhr.responseText);
} else {
reject(xhr.status);
}
};
});
}
const url = prompt("Enter a URL");
getData(url)
.then((result) => {
console.log("Success!"); // Runs on success
console.log(result);
}).catch(status => {
console.log(`An error with status code ${status} occurred: `); // Runs on error
});
0 akan dipicu ketika fungsi
function getData(url) {
return new Promise((resolve, reject) => {
if (!url) {
reject("No URL provided");
}
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.send();
xhr.onload = function () {
if (xhr.status === 200) {
resolve(xhr.responseText);
} else {
reject(xhr.status);
}
};
});
}
const url = prompt("Enter a URL");
getData(url)
.then((result) => {
console.log("Success!"); // Runs on success
console.log(result);
}).catch(status => {
console.log(`An error with status code ${status} occurred: `); // Runs on error
});
1 berhasil, tetapi
function getData(url) {
return new Promise((resolve, reject) => {
if (!url) {
reject("No URL provided");
}
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.send();
xhr.onload = function () {
if (xhr.status === 200) {
resolve(xhr.responseText);
} else {
reject(xhr.status);
}
};
});
}
const url = prompt("Enter a URL");
getData(url)
.then((result) => {
console.log("Success!"); // Runs on success
console.log(result);
}).catch(status => {
console.log(`An error with status code ${status} occurred: `); // Runs on error
});
2 masuk ketika ada kesalahan
Untuk skenario kasus kami berurusan dengan menunggu loop selesai di Node. js, kita akan membutuhkan pemahaman dasar tentang pemrograman
function getData(url) {
return new Promise((resolve, reject) => {
if (!url) {
reject("No URL provided");
}
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.send();
xhr.onload = function () {
if (xhr.status === 200) {
resolve(xhr.responseText);
} else {
reject(xhr.status);
}
};
});
}
const url = prompt("Enter a URL");
getData(url)
.then((result) => {
console.log("Success!"); // Runs on success
console.log(result);
}).catch(status => {
console.log(`An error with status code ${status} occurred: `); // Runs on error
});
3 dan
function getData(url) {
return new Promise((resolve, reject) => {
if (!url) {
reject("No URL provided");
}
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.send();
xhr.onload = function () {
if (xhr.status === 200) {
resolve(xhr.responseText);
} else {
reject(xhr.status);
}
};
});
}
const url = prompt("Enter a URL");
getData(url)
.then((result) => {
console.log("Success!"); // Runs on success
console.log(result);
}).catch(status => {
console.log(`An error with status code ${status} occurred: `); // Runs on error
});
4
BACA JUGA. Instal Node. js di Ubuntu 20. 04 [3 Metode Berbeda]
Dengan
function getData(url) {
return new Promise((resolve, reject) => {
if (!url) {
reject("No URL provided");
}
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.send();
xhr.onload = function () {
if (xhr.status === 200) {
resolve(xhr.responseText);
} else {
reject(xhr.status);
}
};
});
}
const url = prompt("Enter a URL");
getData(url)
.then((result) => {
console.log("Success!"); // Runs on success
console.log(result);
}).catch(status => {
console.log(`An error with status code ${status} occurred: `); // Runs on error
});
_5 kata kunci, kita dapat mengaktifkan perilaku
function getData(url) {
return new Promise((resolve, reject) => {
if (!url) {
reject("No URL provided");
}
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.send();
xhr.onload = function () {
if (xhr.status === 200) {
resolve(xhr.responseText);
} else {
reject(xhr.status);
}
};
});
}
const url = prompt("Enter a URL");
getData(url)
.then((result) => {
console.log("Success!"); // Runs on success
console.log(result);
}).catch(status => {
console.log(`An error with status code ${status} occurred: `); // Runs on error
});
6 dan eksekusi asinkron dalam kode kita. Jadi, untuk digunakan menunggu loop selesai, kita dapat mendefinisikan fungsi
function getData(url) {
return new Promise((resolve, reject) => {
if (!url) {
reject("No URL provided");
}
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.send();
xhr.onload = function () {
if (xhr.status === 200) {
resolve(xhr.responseText);
} else {
reject(xhr.status);
}
};
});
}
const url = prompt("Enter a URL");
getData(url)
.then((result) => {
console.log("Success!"); // Runs on success
console.log(result);
}).catch(status => {
console.log(`An error with status code ${status} occurred: `); // Runs on error
});
7 dan menunggu hasilnya di dalam
Metode 1. untuk. dari lingkaran
Jika kita memiliki iterables yang perlu kita selesaikan dengan for loop tetapi perlu melakukan beberapa operasi asinkron (seperti panggilan jaringan), kita dapat menentukan iterasi kita menggunakan kode di bawah ini
function wrap() {
return new Promise((resolve) => setTimeout(resolve, 500));
}
async function logging(num) {
await wrap();
console.log(num);
}
async function printElement(array) {
for (const num of array) {
await logging(num);
}
console.log("Operation Completed.");
}
printElement([1, 2, 4]);
Keluaran
Iklan
1
2
4
Operation Completed.
Fungsi
function getData(url) {
return new Promise((resolve, reject) => {
if (!url) {
reject("No URL provided");
}
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.send();
xhr.onload = function () {
if (xhr.status === 200) {
resolve(xhr.responseText);
} else {
reject(xhr.status);
}
};
});
}
const url = prompt("Enter a URL");
getData(url)
.then((result) => {
console.log("Success!"); // Runs on success
console.log(result);
}).catch(status => {
console.log(`An error with status code ${status} occurred: `); // Runs on error
});
8 menyimpan objek
Checking the database for the tool passed
The dgf documentation is here thus
4 yang akan menangani situasi
Checking the database for the tool passed
The dgf documentation is here thus
7 di dalam kode. Setelah itu, kita mendefinisikan fungsi
function getData(url) {
return new Promise((resolve, reject) => {
if (!url) {
reject("No URL provided");
}
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.send();
xhr.onload = function () {
if (xhr.status === 200) {
resolve(xhr.responseText);
} else {
reject(xhr.status);
}
};
});
}
const url = prompt("Enter a URL");
getData(url)
.then((result) => {
console.log("Success!"); // Runs on success
console.log(result);
}).catch(status => {
console.log(`An error with status code ${status} occurred: `); // Runs on error
});
4 (
Success!
{"page":2,"per_page":6,"total":12,"total_pages":2,"data":
...
2) yang mencatat angka yang kita ulangi tetapi kita
Success!
{"page":2,"per_page":6,"total":12,"total_pages":2,"data":
...
3 fungsi
function getData(url) {
return new Promise((resolve, reject) => {
if (!url) {
reject("No URL provided");
}
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.send();
xhr.onload = function () {
if (xhr.status === 200) {
resolve(xhr.responseText);
} else {
reject(xhr.status);
}
};
});
}
const url = prompt("Enter a URL");
getData(url)
.then((result) => {
console.log("Success!"); // Runs on success
console.log(result);
}).catch(status => {
console.log(`An error with status code ${status} occurred: `); // Runs on error
});
8 sebelum mencatat angka
Dari sini, kita mendefinisikan fungsi
function getData(url) {
return new Promise((resolve, reject) => {
if (!url) {
reject("No URL provided");
}
const xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.send();
xhr.onload = function () {
if (xhr.status === 200) {
resolve(xhr.responseText);
} else {
reject(xhr.status);
}
};
});
}
const url = prompt("Enter a URL");
getData(url)
.then((result) => {
console.log("Success!"); // Runs on success
console.log(result);
}).catch(status => {
console.log(`An error with status code ${status} occurred: `); // Runs on error
});
_4 lainnya (
Success!
{"page":2,"per_page":6,"total":12,"total_pages":2,"data":
...
6) yang akan mengulang array dan menjalankan fungsi
Success!
{"page":2,"per_page":6,"total":12,"total_pages":2,"data":
...
2
Metode 2. Gunakan Janji. semua
Metode
Success!
{"page":2,"per_page":6,"total":12,"total_pages":2,"data":
...
_8 mengambil janji yang berulang dan mengembalikan satu Janji yang akan dipenuhi hanya ketika semua janji di dalamnya telah dipenuhi. Karena kita memiliki iterable, kita dapat menggunakan metode ini untuk menginisialisasi
Checking the database for the tool passed
The dgf documentation is here thus
4 untuk masing-masing, dan kemudian metode akan mengembalikan Janji ketika semua Janji untuk setiap iterasi telah dipenuhi
BACA JUGA. Properti JavaScript textContent
Untuk mencapainya, kita dapat menyesuaikan fungsi
Success!
{"page":2,"per_page":6,"total":12,"total_pages":2,"data":
...
_6 dengan memetakan array ke promise dan menunggu semua promise diselesaikan sebelum memindahkannya
async function printElement(array) {
const promises = array.map(logging);
await Promise.all(promises);
console.log("Operation Completed.")
}
Keluaran
1
2
4
Operation Completed
Ringkasan
Untuk menunggu semua operasi dalam iterasi loop selesai, Promises adalah taruhan terbaik Anda untuk menghadapi situasi seperti itu. Setiap metode efektif dalam menanganinya, namun, metode
Success!
{"page":2,"per_page":6,"total":12,"total_pages":2,"data":
...
8 yang akan menjalankan semua fungsi terlampir secara paralel dapat membuat pendekatan rumit dalam array yang sangat besar
Bagaimana Anda menunggu janji dalam for loop?
Menjanjikan JavaScript di For Loops. Untuk menggunakan janji Javascript dalam loop for, gunakan async / tunggu . Ini menunggu setiap promiseAction selesai sebelum melanjutkan ke iterasi berikutnya dalam loop. Dalam panduan ini, Anda mempelajari cara kerja async/await dan cara menyelesaikan masalah penggunaan promise di for loop.
Bagaimana Anda menunggu janji dalam JavaScript?
Kata kunci menunggu digunakan untuk menunggu Janji. Itu hanya dapat digunakan di dalam fungsi async. Kata kunci ini membuat JavaScript menunggu hingga janji itu diselesaikan dan mengembalikan hasilnya.
Untuk mencapai ini, kita perlu membungkus untuk. loop di dalam fungsi async dan kemudian kita dapat menggunakan await yang akan menjeda loop kita dan menunggu janji untuk menyelesaikannya . Setelah janji diselesaikan maka akan pindah ke item berikutnya.
Menggunakan await di dalam loop for akan menyebabkan kode berhenti dan menunggu operasi asinkron selesai sebelum melanjutkan . Ini berarti bahwa semua janji akan dijalankan secara berurutan.
