Alternatif kepada AbortController untuk Mengendalikan Tamat Masa Async dalam JavaScript

Dalam dunia JavaScript tak segerak, memahami cara mengendalikan tamat masa dan pembatalan bukan hanya tentang alatan seperti AbortController — ia mengenai mencipta penyelesaian yang berdaya tahan dan boleh disesuaikan untuk setiap senario.

AbortController API telah menjadi penyelesaian utama untuk mengendalikan pembatalan tugas, terutamanya dalam projek moden. Walau bagaimanapun, ia bukan selalunya pilihan yang ideal—atau pun pilihan yang tersedia—bergantung pada konteks atau persekitaran tempat anda bekerja.

Dalam blog ini, kami akan meneroka kaedah alternatif untuk mengurus tamat masa tak segerak tanpa bergantung pada AbortController.

async function customAbortController(asyncFunction, timeout = 5000) {
  return async (...args) => {
    const timeoutPromise = new Promise((_, reject) => {
      const id = setTimeout(() => {
        clearTimeout(id)
        reject(new Error(`Operation timed out after ${timeout} ms`))
      }, timeout)
    })
    try {
      return await Promise.race([asyncFunction(...args), timeoutPromise])
    } catch (error) {
      throw error
    }
  }
}

const abortControllerWrapper = async (asyncFunction, params) => {
  const response = await customAbortController(asyncFunction, 5000)
  return response(params);
}

// Example usage
const getUsers = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users')
  // handle response the way you prefer.
}

const getTodoById = async (id) => {
  const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`)
  // handle response the way you prefer.
}

const loadUsers = async () => {
  try {
    const response = await abortControllerWrapper(getUsers);
    // handle response the way you prefer.
  } catch (error) {
    console.error("ERROR", error.message) // "Operation timed out after 5000 ms"
  }
}
loadUsers();

// Try out yourself for getTodoById ?

Apa yang kita lakukan sebenarnya?

Dalam Javascript, Promise tidak mempunyai sebarang cara rasmi untuk membatalkan dirinya sendiri.

Jadi kami menggunakan kaedah Promise.race() di sini.

Kami sedang mencipta Janji palsu yang diselesaikan dalam masa tertentu & berlumba dengan panggilan API sebenar jadi sama ada kami mendapat respons API atau janji ditolak selepas tamat masa telah dipalang.

Saya harap kod ini berguna?!

Jangan ragu untuk menyesuaikan mengikut keperluan anda & beritahu saya perasaan anda tentangnya ❤️

Atas ialah kandungan terperinci Alternatif kepada AbortController untuk Mengendalikan Tamat Masa Async dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!