Janji dalam JavaScript: Panduan Terbaik untuk Pemula

pengenalan

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.

Jadual Kandungan

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

Apakah Janji dalam JavaScript?

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.

Keadaan Janji

Janji boleh dibuat dalam salah satu daripada tiga keadaan:

1. Belum selesai: Keadaan awal, tidak dipenuhi atau ditolak.
2. Dipenuhi: Operasi selesai dengan jayanya.
3. Ditolak: Operasi gagal.

Sintaks Asas Janji

let promise = new Promise(function(resolve, reject) {
    // Asynchronous operation
    let success = true;

    if(success) {
        resolve("Operation successful!");
    } else {
        reject("Operation failed!");
    }
});

Mencipta Janji

Membuat janji melibatkan pengwujudan objek Promise baharu dan menghantar fungsi kepadanya. Fungsi ini mengambil dua parameter: selesaikan dan tolak.

Contoh

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.

Merangkai Janji

Salah satu ciri hebat janji ialah keupayaan untuk merantainya. Ini membolehkan anda melakukan urutan operasi tak segerak dengan cara yang boleh dibaca dan diselenggara.

kemudian()

Kaedah then() digunakan untuk mengendalikan pemenuhan janji.

myPromise.then((message) => {
    console.log(message);
    return "Next step";
}).then((nextMessage) => {
    console.log(nextMessage);
});

tangkap ()

Kaedah catch() digunakan untuk menangani penolakan janji.

myPromise.then((message) => {
    console.log(message);
}).catch((error) => {
    console.log(error);
});

akhirnya()

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

Mengendalikan ralat dalam janji adalah penting untuk kod yang mantap.

Perangkap Biasa

1. Mengabaikan Ralat: Sentiasa kendalikan ralat menggunakan catch().
2. Terlupa untuk Kembali: Pastikan anda membalas janji dalam pengendali kemudian().

Teknik Pengendalian Ralat

myPromise.then((message) => {
    console.log(message);
    throw new Error("Something went wrong!");
}).catch((error) => {
    console.error(error.message);
});

Promise.all()

Promise.all() mengambil pelbagai janji dan mengembalikan satu janji yang diselesaikan apabila semua janji dalam tatasusunan diselesaikan, atau menolak jika mana-mana janji ditolak.

Penggunaan

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()

Promise.race() mengembalikan janji yang diselesaikan atau ditolak sebaik sahaja salah satu janji dalam tatasusunan diselesaikan atau ditolak.

Penggunaan

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()

Promise.any() mengembalikan janji yang diselesaikan sebaik sahaja mana-mana janji dalam tatasusunan dipenuhi atau ditolak jika semua janji ditolak.

Penggunaan

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()

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.

Penggunaan

let promise1 = Promise.resolve("Resolved");
let promise2 = Promise.reject("Rejected");

Promise.allSettled([promise1, promise2]).then((results) => {
    results.forEach((result) => console.log(result.status));
});

Async/Tunggu

Kata kunci async dan menunggu membolehkan anda bekerja dengan janji dengan cara yang lebih segerak.

Sintaks

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();

Berpadu dengan Janji

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();

Contoh Dunia Nyata

Ambil API

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));

Pembacaan Fail Async

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();

Kesilapan Biasa

Anti-Corak

1. Neraka Panggilan Balik: Elakkan panggilan bersarang kemudian().
2. Mengabaikan Ralat: Sentiasa kendalikan penolakan janji.

Amalan Terbaik

1. Sentiasa Membalas Janji: Pastikan anda membalas janji dalam pengendali then() and catch() anda.
2. Gunakan Async/Await: Permudahkan pengendalian janji dengan async dan tunggu.

Konsep Janji Lanjutan

Janji Tersuai

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);
});

Penggabung Janji

Gabungkan berbilang janji menggunakan penggabung seperti Promise.all(), Promise.race(), dll., untuk mengendalikan aliran tak segerak yang kompleks.

Soalan Lazim

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.

Kesimpulan

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!