Alternative à AbortController pour gérer les délais d'attente asynchrones en JavaScript

Dans le monde du JavaScript asynchrone, comprendre comment gérer les délais d'attente et les annulations ne concerne pas seulement des outils comme AbortController, il s'agit également de créer des solutions résilientes et adaptables pour chaque scénario.

L'API AbortController est devenue une solution incontournable pour gérer les annulations de tâches, en particulier dans les projets modernes. Cependant, ce n'est pas toujours le choix idéal, ni même disponible, selon le contexte ou l'environnement dans lequel vous travaillez.

Dans ce blog, nous explorerons une méthode alternative pour gérer les délais d'attente asynchrones sans compter sur 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 ?

Que faisons-nous exactement ?

En Javascript, Promise n'a aucun moyen officiel de s'annuler.

Nous utilisons donc ici la méthode Promise.race().

Nous créons une promesse factice qui se résout dans un temps donné et la confrontons à un appel d'API réel afin que nous obtenions la réponse de l'API ou que la promesse soit rejetée une fois le délai d'attente dépassé.

J'espère que ce code a été utile ?!

N'hésitez pas à personnaliser en fonction de vos besoins et faites-moi savoir ce que vous en pensez ❤️

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!