Rumah > Artikel > hujung hadapan web > Janji dalam JavaScript: Panduan Terbaik untuk Pemula
JavaScript ialah bahasa pengaturcaraan serba boleh yang digunakan terutamanya untuk pembangunan web. Salah satu ciri JavaScript yang paling berkuasa ialah keupayaannya untuk mengendalikan operasi tak segerak. Di sinilah janji datang, membolehkan pembangun mengurus kod tak segerak dengan lebih cekap. Panduan ini akan membawa anda melalui asas janji, memberikan pengetahuan yang mendalam dan contoh praktikal untuk membantu anda memahami dan menggunakannya dengan berkesan.
Heading | Subtopics |
---|---|
What is a Promise in JavaScript? | Definition, State of a Promise, Basic Syntax |
Creating a Promise | Example, Resolving, Rejecting |
Chaining Promises | then(), catch(), finally() |
Handling Errors | Common Pitfalls, Error Handling Techniques |
Promise.all() | Usage, Examples, Handling Multiple Promises |
Promise.race() | Usage, Examples, First Settled Promise |
Promise.any() | Usage, Examples, First Fulfilled Promise |
Promise.allSettled() | Usage, Examples, When All Promises Settle |
Async/Await | Syntax, Combining with Promises, Examples |
Real-World Examples | Fetch API, Async File Reading |
Common Mistakes | Anti-Patterns, Best Practices |
Advanced Promise Concepts | Custom Promises, Promise Combinators |
FAQs | Answering Common Questions |
Conclusion | Summary, Final Thoughts |
Janji dalam JavaScript ialah objek yang mewakili penyiapan atau kegagalan operasi tak segerak. Ia membolehkan anda mengaitkan pengendali dengan nilai kejayaan akhirnya atau sebab kegagalan tindakan tak segerak. Ini membolehkan kaedah tak segerak mengembalikan nilai seperti kaedah segerak: daripada segera mengembalikan nilai akhir, kaedah tak segerak mengembalikan janji untuk membekalkan nilai pada satu ketika pada masa hadapan.
Janji boleh dibuat dalam salah satu daripada tiga keadaan:
let promise = new Promise(function(resolve, reject) { // Asynchronous operation let success = true; if(success) { resolve("Operation successful!"); } else { reject("Operation failed!"); } });
Membuat janji melibatkan pengwujudan objek Promise baharu dan menghantar fungsi kepadanya. Fungsi ini mengambil dua parameter: selesaikan dan tolak.
let myPromise = new Promise((resolve, reject) => { let condition = true; if(condition) { resolve("Promise resolved successfully!"); } else { reject("Promise rejected."); } }); myPromise.then((message) => { console.log(message); }).catch((message) => { console.log(message); });
Dalam contoh ini, myPromise akan berjaya diselesaikan dan log "Janji diselesaikan dengan jayanya!" ke konsol.
Salah satu ciri hebat janji ialah keupayaan untuk merantainya. Ini membolehkan anda melakukan urutan operasi tak segerak dengan cara yang boleh dibaca dan diselenggara.
Kaedah then() digunakan untuk mengendalikan pemenuhan janji.
myPromise.then((message) => { console.log(message); return "Next step"; }).then((nextMessage) => { console.log(nextMessage); });
Kaedah catch() digunakan untuk menangani penolakan janji.
myPromise.then((message) => { console.log(message); }).catch((error) => { console.log(error); });
Kaedah finally() digunakan untuk melaksanakan kod tanpa mengira sama ada janji itu ditepati atau ditolak.
myPromise.finally(() => { console.log("Promise is settled (either fulfilled or rejected)."); });
Mengendalikan ralat dalam janji adalah penting untuk kod yang mantap.
myPromise.then((message) => { console.log(message); throw new Error("Something went wrong!"); }).catch((error) => { console.error(error.message); });
Promise.all() mengambil pelbagai janji dan mengembalikan satu janji yang diselesaikan apabila semua janji dalam tatasusunan diselesaikan, atau menolak jika mana-mana janji ditolak.
let promise1 = Promise.resolve(3); let promise2 = 42; let promise3 = new Promise((resolve, reject) => { setTimeout(resolve, 100, 'foo'); }); Promise.all([promise1, promise2, promise3]).then((values) => { console.log(values); // [3, 42, "foo"] });
Promise.race() mengembalikan janji yang diselesaikan atau ditolak sebaik sahaja salah satu janji dalam tatasusunan diselesaikan atau ditolak.
let promise1 = new Promise((resolve, reject) => { setTimeout(resolve, 500, 'one'); }); let promise2 = new Promise((resolve, reject) => { setTimeout(resolve, 100, 'two'); }); Promise.race([promise1, promise2]).then((value) => { console.log(value); // "two" });
Promise.any() mengembalikan janji yang diselesaikan sebaik sahaja mana-mana janji dalam tatasusunan dipenuhi atau ditolak jika semua janji ditolak.
let promise1 = Promise.reject("Error 1"); let promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, "Success")); let promise3 = new Promise((resolve, reject) => setTimeout(resolve, 200, "Another success")); Promise.any([promise1, promise2, promise3]).then((value) => { console.log(value); // "Success" }).catch((error) => { console.log(error); });
Promise.allSettled() mengembalikan janji yang diselesaikan selepas semua janji yang diberikan sama ada diselesaikan atau ditolak, dengan pelbagai objek yang masing-masing menerangkan hasil setiap janji.
let promise1 = Promise.resolve("Resolved"); let promise2 = Promise.reject("Rejected"); Promise.allSettled([promise1, promise2]).then((results) => { results.forEach((result) => console.log(result.status)); });
Kata kunci async dan menunggu membolehkan anda bekerja dengan janji dengan cara yang lebih segerak.
async function myFunction() { let myPromise = new Promise((resolve, reject) => { setTimeout(() => resolve("Done!"), 1000); }); let result = await myPromise; // Wait until the promise resolves console.log(result); // "Done!" } myFunction();
async function fetchData() { try { let response = await fetch('https://api.example.com/data'); let data = await response.json(); console.log(data); } catch (error) { console.error("Error fetching data: ", error); } } fetchData();
API Ambil ialah kes penggunaan biasa untuk janji.
fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error));
Menggunakan janji untuk membaca fail dalam Node.js.
const fs = require('fs').promises; async function readFile() { try { let content = await fs.readFile('example.txt', 'utf-8'); console.log(content); } catch (error) { console.error('Error reading file:', error); } } readFile();
Anda boleh membuat janji tersuai untuk mengendalikan operasi tak segerak tertentu.
function customPromiseOperation() { return new Promise((resolve, reject) => { setTimeout(() => { resolve("Custom operation complete!"); }, 2000); }); } customPromiseOperation().then((message) => { console.log(message); });
Gabungkan berbilang janji menggunakan penggabung seperti Promise.all(), Promise.race(), dll., untuk mengendalikan aliran tak segerak yang kompleks.
Bagaimanakah janji membantu dengan pengaturcaraan tak segerak?
Janji menyediakan cara yang lebih bersih dan mudah dibaca untuk mengendalikan operasi tak segerak berbanding panggilan balik tradisional, mengurangkan risiko "neraka panggil balik".
Apakah perbezaan antara then() dan `
tangkap()?
then() digunakan untuk mengendalikan janji yang diselesaikan, manakala catch()` digunakan untuk mengendalikan janji yang ditolak.
Bolehkah anda menggunakan janji dengan kod JavaScript yang lebih lama?
Ya, janji boleh digunakan dengan kod JavaScript yang lebih lama, tetapi untuk keserasian penuh, anda mungkin perlu menggunakan polyfill.
Apakah faedah menggunakan Promise.all()?
Promise.all() membolehkan anda menjalankan berbilang janji secara selari dan menunggu kesemuanya selesai, menjadikannya lebih mudah untuk mengurus berbilang operasi tak segerak.
Bagaimana async/menunggu meningkatkan pengendalian janji?
sintaks async/waiit menjadikan kod asynchronous kelihatan dan berkelakuan lebih seperti kod segerak, meningkatkan kebolehbacaan dan kebolehselenggaraan.
Apa yang berlaku jika janji tidak diselesaikan atau ditolak?
Jika janji tidak diselesaikan atau ditolak, ia kekal dalam keadaan belum selesai selama-lamanya. Adalah penting untuk memastikan semua janji akhirnya diselesaikan atau ditolak untuk mengelakkan masalah yang berpotensi.
Janji ialah bahagian asas JavaScript moden, membolehkan pembangun mengendalikan operasi tak segerak dengan lebih cekap dan mudah dibaca. Dengan menguasai janji, anda boleh menulis kod yang lebih bersih dan lebih boleh diselenggara yang mengendalikan kerumitan pengaturcaraan tak segerak dengan berkesan. Sama ada anda mengambil data daripada API, membaca fail atau melaksanakan tugas tak segerak tersuai, memahami janji adalah penting untuk mana-mana pembangun JavaScript.
Atas ialah kandungan terperinci Janji dalam JavaScript: Panduan Terbaik untuk Pemula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!