Janji JavaScript: Asas yang Perlu Anda Tahu

pengenalan

JavaScript ialah bahasa pengaturcaraan benang tunggal, bermakna ia hanya boleh menjalankan satu tugas pada satu masa. Ini menjadi rumit dengan operasi tak segerak seperti mengambil data atau menetapkan pemasa, yang boleh menyekat aliran pelaksanaan dan melambatkan apl anda.

Untuk mengendalikan tugas tak segerak ini tanpa membekukan benang, kami menemui Janji—alat berkuasa yang memudahkan pengaturcaraan tak segerak. Dengan Janji, anda boleh mengurus tugasan yang sudah lama berjalan dengan lebih berkesan, menulis kod yang lebih bersih, lebih mudah dibaca dan mengelakkan "neraka panggilan balik" yang digeruni."

Dalam artikel ini, saya berhasrat untuk membiasakan anda dengan Janji, cara ia berfungsi dan cara ia memudahkan pengaturcaraan tak segerak.

Apa itu Janji?

Bayangkan anda sedang memesan hidangan di restoran. Sebaik sahaja anda membuat pesanan, anda tidak perlu menunggu di dapur untuk makanan anda disediakan. Sebaliknya, anda meneruskan perbualan anda atau menikmati suasana sambil dapur menyediakan hidangan anda di latar belakang. Restoran berjanji untuk menghidangkan makanan kepada anda sebaik sahaja ia siap. Anda boleh mempercayai janji ini kerana, akhirnya, satu daripada dua perkara akan berlaku: sama ada hidangan anda akan tiba (dipenuhi), atau dapur akan memberitahu anda bahawa mereka tidak dapat menyelesaikan pesanan (ditolak ).

Dalam JavaScript, Promises berfungsi dengan cara yang sama. Apabila anda meminta JavaScript melakukan sesuatu yang memerlukan masa—seperti mengambil data daripada pelayan—ia mengembalikan Janji. Janji ini tidak serta-merta memberikan anda hasilnya. Sebaliknya, ia memberitahu anda, "Saya akan menghubungi anda semula apabila kerja selesai." Pada masa itu, kod anda yang lain terus berjalan. Setelah tugas selesai, Janji ialah sama ada:

• Selesai (tugas berjaya), atau
• Ditolak (tugas gagal), dan anda boleh mengendalikan hasilnya dengan sewajarnya.

Cara Janji berfungsi dalam JavaScript

Janji mewakili nilai yang mungkin tersedia sekarang, pada masa hadapan, atau tidak sama sekali. Ia mempunyai tiga keadaan:

• Belum selesai: Tugas masih dalam proses dan keputusan akhir (dipenuhi atau ditolak) belum ditentukan.
• Selesai: Tugas telah berjaya diselesaikan dan hasilnya tersedia.
• Ditolak: Tugas gagal dan ralat tersedia untuk dikendalikan

1. Mencipta Janji

Untuk mencipta Janji, anda menggunakan pembina Janji, yang mengambil fungsi (dikenali sebagai pelaksana) yang mempunyai dua parameter: selesaikan dan tolak. Fungsi menyelesaikan dipanggil apabila Janji dipenuhi, manakala fungsi tolak dipanggil apabila ia ditolak.

const myPromise = new Promise((resolve, reject) => {
  // Simulating an asynchronous task (e.g., fetching data)
  const success = true; // Simulate success or failure

  if (success) {
    resolve("Operation completed successfully!"); // Fulfill the promise
  } else {
    reject("Operation failed."); // Reject the promise
  }
});

2. Menyelesaikan dan Menolak Janji

Setelah Janji dibuat, anda boleh memutuskan keputusannya dengan memanggil sama ada selesaikan atau tolak:

• resolve(value): Panggil fungsi ini apabila operasi tak segerak selesai dengan jayanya. Ia memberikan nilai kepada pengendali yang menunggu Janji ditunaikan.
• reject(error): Panggil fungsi ini apabila operasi gagal. Ia menghantar mesej ralat kepada pengendali yang menunggu Janji ditolak.

3. Mengambil Janji

Setelah anda mencipta Janji, langkah seterusnya ialah memakannya. JavaScript menyediakan beberapa kaedah untuk mengendalikan hasil Promises: .then(), .catch(), dan .finally(). Setiap kaedah ini mempunyai tujuan tertentu dan membolehkan anda mengurus hasil operasi tak segerak dengan berkesan.

• Mengendalikan Janji yang Ditetapkan dengan .then(): Kaedah .then() digunakan untuk menentukan perkara yang harus berlaku apabila Janji ditepati. Ia memerlukan dua hujah pilihan: panggilan balik untuk nilai yang diselesaikan dan satu lagi untuk mengendalikan penolakan.

const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Data fetched successfully!");
    }, 1000);
  });
};

fetchData()
  .then(result => {
    console.log(result); // Logs: Data fetched successfully!
  });

• Mengendalikan Penolakan dengan .catch(): Kaedah .catch() direka khusus untuk mengendalikan ralat yang berlaku semasa pelaksanaan Janji. Ini menjadikannya cara yang bersih untuk menangani penolakan.

const fetchWithError = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("Error fetching data."); // Simulating an error
    }, 1000);
  });
};

fetchWithError()
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error(error); // Logs: Error fetching data.
  });

• Tindakan akhir atau pembersihan menggunakan .finally(): Kaedah .finally() membolehkan anda melaksanakan kod selepas Promise telah diselesaikan, tidak kira sama ada ia dipenuhi atau ditolak. Ini berguna untuk tindakan pembersihan atau tugasan yang sepatutnya dijalankan dalam kedua-dua senario kejayaan dan kegagalan.

fetchData()
  .then(result => {
    console.log(result); // Logs: Data fetched successfully!
  })
  .catch(error => {
    console.error(error); // Handle error
  })
  .finally(() => {
    console.log("Promise has settled."); // Logs after either success or failure
  });

Ringkasnya:

• then(): Use this method to handle the resolved value of a Promise.
• catch(): Use this method to handle errors when a Promise is rejected.
• finally(): This method runs code after the Promise settles, regardless of the outcome, allowing for cleanup or final actions.

4. Promise Chaining

One of the most powerful features of Promises is their ability to be chained together, allowing you to perform multiple asynchronous operations in sequence. This means each operation waits for the previous one to complete before executing, which is particularly useful when tasks depend on each other.

Let's take a look at the following example:

const fetchUserData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ userId: 1, username: "JohnDoe" });
    }, 1000);
  });
};

const fetchPosts = (userId) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(["Post 1", "Post 2", "Post 3"]); // Simulated posts
    }, 1000);
  });
};

// Chaining Promises
fetchUserData()
  .then(user => {
    console.log("User fetched:", user);
    return fetchPosts(user.userId); // Pass userId to the next promise
  })
  .then(posts => {
    console.log("Posts fetched:", posts);
  })
  .catch(error => {
    console.error("Error:", error);
  });

In this example, the fetchUserData function returns a Promise that resolves with user information. The resolved value is then passed to the fetchPosts function, which returns another Promise. If any of these Promises are rejected, the error is caught in the final .catch() method, allowing for effective error handling throughout the chain.

Conclusion

In conclusion, Promises are a crucial part of modern JavaScript, enabling developers to handle asynchronous operations in a more structured and efficient way. By using Promises, you can:

• Simplify the management of asynchronous tasks and avoid callback hell.
• Chain multiple asynchronous operations to maintain a clear flow of execution.
• Effectively handle errors with a unified approach.

As you implement Promises in your own projects, you'll find that they not only improve code readability but also enhance the overall user experience by keeping your applications responsive. I hope that this journey through JavaScript's foundational concepts has provided valuable insights for developers. Happy coding!

Atas ialah kandungan terperinci Janji JavaScript: Asas yang Perlu Anda Tahu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!