Janji dalam JavaScript dan React Native: Penciptaan, Penggunaan dan Senario Biasa

Mengendalikan tugas tak segerak adalah penting dalam JavaScript, terutamanya dalam persekitaran seperti React Native di mana pengambilan data, animasi dan interaksi pengguna perlu berfungsi dengan lancar. Janji menyediakan cara yang berkuasa untuk mengurus operasi tak segerak, menjadikan kod lebih mudah dibaca dan diselenggara. Blog ini akan merangkumi cara membuat dan menggunakan janji dalam JavaScript, dengan contoh praktikal yang berkaitan dengan React Native.

---

Apa itu Janji?

Janji dalam JavaScript ialah objek yang mewakili penyiapan (atau kegagalan) operasi tak segerak. Ia membolehkan kami mengendalikan kod tak segerak dengan cara yang kelihatan lebih segerak, mengelakkan "neraka panggil balik" klasik. Janji mempunyai tiga keadaan:

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

---

Mencipta Janji

Untuk mencipta janji, kami menggunakan pembina Promise, yang mengambil satu fungsi (fungsi pelaksana) dengan dua parameter:

• menyelesaikan: Panggil fungsi ini untuk memenuhi janji apabila operasi selesai dengan jayanya.
• reject: Panggil fungsi ini untuk menolak janji jika ralat berlaku.

Contoh: Mencipta Janji Asas

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true; // Simulating success/failure
      if (success) {
        resolve({ data: "Sample data fetched" });
      } else {
        reject("Error: Data could not be fetched.");
      }
    }, 2000); // Simulate a 2-second delay
  });
}

Dalam contoh ini:

• Kami mencipta janji yang mensimulasikan pengambilan data dengan setTimeout.
• Jika pembolehubah kejayaan adalah benar, kami memanggil resolve() dengan beberapa data; jika tidak, kami memanggil reject() dengan mesej ralat.

---

Menggunakan Janji dengan .then(), .catch(), dan .finally()

Setelah janji dibuat, kami boleh mengendalikan hasilnya menggunakan:

• .then() untuk mengendalikan resolusi yang berjaya,
• .catch() untuk mengendalikan ralat dan
• .finally() untuk melaksanakan kod selepas janji diselesaikan, tanpa mengira hasil.

Contoh: Mengendalikan Janji

fetchData()
  .then((result) => console.log("Data:", result.data)) // Handle success
  .catch((error) => console.error("Error:", error))    // Handle failure
  .finally(() => console.log("Fetch attempt completed")); // Finalize

Dalam contoh ini:

• .then() dipanggil jika janji diselesaikan, mencetak data.
• .catch() mengendalikan sebarang ralat yang berlaku jika janji ditolak.
• .finally() berjalan tanpa mengira sama ada janji itu diselesaikan atau ditolak.

---

Kes Penggunaan Praktikal untuk Janji dalam React Native

1. Mengambil Data daripada API

Dalam React Native, pengambilan data ialah tugas tak segerak biasa yang boleh diurus dengan cekap dengan janji.

function fetchData(url) {
  return fetch(url)
    .then(response => {
      if (!response.ok) throw new Error("Network response was not ok");
      return response.json();
    })
    .then(data => console.log("Fetched data:", data))
    .catch(error => console.error("Fetch error:", error));
}

// Usage
fetchData("https://api.example.com/data");

Kes Penggunaan: Mengambil data daripada REST API atau permintaan rangkaian lain, di mana kita perlu mengendalikan kedua-dua respons dan ralat yang berjaya.

---

2. Menggunakan Janji untuk Operasi Async Berjujukan

Kadangkala, satu tugas tak segerak bergantung pada tugasan yang lain. Janji memudahkan operasi rantaian mengikut urutan.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true; // Simulating success/failure
      if (success) {
        resolve({ data: "Sample data fetched" });
      } else {
        reject("Error: Data could not be fetched.");
      }
    }, 2000); // Simulate a 2-second delay
  });
}

Kes Penggunaan: Berguna untuk log masuk pengguna dan kemudian mengambil data profil berdasarkan identiti mereka.

---

3. Mengendalikan Pelbagai Janji dengan Promise.all()

Jika anda mempunyai berbilang janji bebas yang boleh dilaksanakan secara selari, Promise.all() membenarkan anda menunggu semua janji itu diselesaikan atau mana-mana janji itu ditolak.

fetchData()
  .then((result) => console.log("Data:", result.data)) // Handle success
  .catch((error) => console.error("Error:", error))    // Handle failure
  .finally(() => console.log("Fetch attempt completed")); // Finalize

Kes Penggunaan: Mengambil berbilang sumber secara serentak, seperti mengambil siaran dan ulasan daripada titik akhir API yang berasingan.

---

4. Perlumbaan Janji dengan Promise.race()

Dengan Promise.race(), janji pertama yang diselesaikan (menyelesaikan atau menolak) menentukan keputusan. Ini berguna apabila anda ingin menetapkan tamat masa untuk tugasan yang berpanjangan.

function fetchData(url) {
  return fetch(url)
    .then(response => {
      if (!response.ok) throw new Error("Network response was not ok");
      return response.json();
    })
    .then(data => console.log("Fetched data:", data))
    .catch(error => console.error("Fetch error:", error));
}

// Usage
fetchData("https://api.example.com/data");

Kes Penggunaan: Menetapkan tamat masa untuk permintaan rangkaian, supaya permintaan rangkaian tidak terputus selama-lamanya jika pelayan lambat atau tidak bertindak balas.

---

5. Menggunakan Promise.allSettled() untuk Mengendalikan Hasil Bercampur

Promise.allSettled() menunggu semua janji diselesaikan, tidak kira sama ada janji itu diselesaikan atau ditolak. Ini berguna apabila anda memerlukan keputusan semua janji, walaupun ada yang gagal.

function authenticateUser() {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ userId: 1, name: "John Doe" }), 1000);
  });
}

function fetchUserProfile(user) {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ ...user, profile: "Profile data" }), 1000);
  });
}

// Chain promises
authenticateUser()
  .then(user => fetchUserProfile(user))
  .then(profile => console.log("User Profile:", profile))
  .catch(error => console.error("Error:", error));

Kes Penggunaan: Berguna apabila melaksanakan berbilang permintaan yang sesetengahnya mungkin gagal, seperti mengambil sumber data pilihan atau membuat berbilang panggilan API.

---

Teknik Lanjutan: Menukar Panggilan Balik kepada Janji

Pangkalan kod lama atau perpustakaan tertentu mungkin menggunakan panggilan balik dan bukannya janji. Anda boleh membungkus panggilan balik ini dalam janji, menukarkannya kepada fungsi berasaskan janji moden.

Contoh: Membungkus Panggilan Balik dalam Janji

const fetchPosts = fetch("https://api.example.com/posts").then(res => res.json());
const fetchComments = fetch("https://api.example.com/comments").then(res => res.json());

Promise.all([fetchPosts, fetchComments])
  .then(([posts, comments]) => {
    console.log("Posts:", posts);
    console.log("Comments:", comments);
  })
  .catch(error => console.error("Error fetching data:", error));

Kes Penggunaan: Teknik ini membolehkan anda bekerja dengan kod berasaskan panggilan balik warisan dengan cara yang mesra janji, menjadikannya serasi dengan sintaks async/menunggu moden.

---

Ringkasan

Promises ialah alat berkuasa untuk mengurus operasi tak segerak dalam JavaScript dan React Native. Dengan memahami cara membuat, menggunakan dan mengendalikan janji dalam pelbagai senario, anda boleh menulis kod yang lebih bersih dan boleh diselenggara. Berikut ialah imbasan ringkas kes penggunaan biasa:

• Permintaan API: Mengambil data daripada pelayan dengan pengendalian ralat.
• Operasi Merangkai: Melaksanakan tugas bergantung mengikut urutan.
• Operasi Selari: Menjalankan berbilang janji serentak dengan Promise.all().
• Tamat masa dan Perlumbaan: Mengehadkan tempoh permintaan dengan Promise.race().
• Hasil Campuran: Menggunakan Promise.allSettled() untuk tugasan yang mungkin gagal sebahagiannya.
• Menukar Panggilan Balik: Membungkus fungsi berasaskan panggilan balik dalam janji untuk keserasian dengan sintaks moden.

Dengan memanfaatkan janji dengan berkesan, anda boleh menjadikan pengaturcaraan tak segerak dalam JavaScript dan React Native lebih bersih, lebih boleh diramal dan lebih mantap.

Atas ialah kandungan terperinci Janji dalam JavaScript dan React Native: Penciptaan, Penggunaan dan Senario Biasa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!