Cara Mengendalikan Operasi Asynchronous

Cara Mengendalikan Operasi Asynchronous

Dalam TypeScript, kami mempunyai pelbagai cara untuk mengendalikan operasi tak segerak: panggil balik, janji dan async/menunggu. Pengaturcaraan tak segerak membolehkan kami mengurus operasi yang mungkin mengambil masa, seperti mengambil data daripada API, tanpa menyekat pelaksanaan kod lain.

Panggilan balik

Panggil balik ialah fungsi yang dihantar sebagai hujah kepada fungsi lain dan dilaksanakan selepas tugas selesai. Walaupun panggilan balik berfungsi untuk tugasan mudah, ia boleh menjadi tidak boleh dibaca dengan cepat apabila operasi perlu dirantai.

type Todo = {
  id: number;
  userId: number;
  title: string;
  completed: boolean;
};
const createPromise = (
  id: number,
  callback: (error: Error | null, task: Todo | null) => void
) => {
  fetch(`https://jsonplaceholder.typicode.com/todos/${id}`)
    .then((response) => {
      if (response.ok) {
        return response.json();
      } else {
        throw new Error("failed to load data");
      }
    })
    .then((data) => {
      callback(null, data);
    })
    .catch((error) => {
      callback(error, null);
    });
};

createPromise(1, (error, task) => {
  if (error) {
    console.error(error);
  } else {
    console.log(task);
  }
});

Janji

Promises menyediakan pendekatan yang lebih bersih daripada panggilan balik dengan membenarkan kami mengendalikan operasi tak segerak dengan cara yang lebih linear menggunakan kaedah .then() dan .catch(). Mereka lebih mudah dirantai tetapi masih boleh menjadi kucar-kacir dengan operasi yang rumit.

const createPromise = (id: number): Promise<object> => {
  return new Promise<object>((resolve, reject) => {
    const data: object = fetch(
      `https://jsonplaceholder.typicode.com/todos/${id}`
    ).then((response) => response.json());
    if (data) {
      resolve(data);
    } else {
      reject("failed to load data");
    }
  });
};

createPromise(1)
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

Async/Tunggu

Async/wait menyediakan cara yang lebih mudah dibaca dan terurus untuk mengendalikan kod tak segerak berbanding janji dan panggilan balik. Ia membolehkan kami menulis kod tak segerak seolah-olah ia segerak, menggunakan kata kunci tak segerak untuk menandakan fungsi sebagai tak segerak dan menunggu untuk menjeda pelaksanaan kod sehingga janji diselesaikan. Pendekatan ini memberikan kebolehbacaan yang lebih baik dan lebih mudah untuk nyahpepijat.

type Todo = {
  id: number;
  userId: number;
  title: string;
  completed: boolean;
};
const getTodo = async (): Promise<Todo> => {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  const data = await response.json();
  return data;
};

console.log(getTodo());

Mengapa Menggunakan Async/Await?

• Kebolehbacaan dipertingkat: Async/wait lebih mudah dibaca dan lebih mudah untuk diikuti, terutamanya untuk kod kompleks dengan berbilang panggilan tak segerak.
• Pengendalian ralat: Ia membolehkan pengendalian ralat yang lebih mudah dengan blok cuba/tangkap, bukannya berbilang kaedah .catch().

Terima Kasih

Atas ialah kandungan terperinci Cara Mengendalikan Operasi Asynchronous. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!