JavaScript で非同期タイムアウトを処理するための AbortController の代替-jsチュートリアル-php.cn

JavaScript で非同期タイムアウトを処理するための AbortController の代替

Linda Hamilton

リリース： 2024-12-07 09:42:12

オリジナル

973 人が閲覧しました

Alternative to AbortController for Handling Async Timeouts in JavaScript

非同期 JavaScript の世界では、タイムアウトとキャンセルの処理方法を理解することは、AbortController のようなツールだけではなく、あらゆるシナリオに対応する回復力と適応性のあるソリューションを作成することにもつながります。

AbortController API は、特に最新のプロジェクトでタスクのキャンセルを処理するための頼りになるソリューションになりました。ただし、作業しているコンテキストや環境によっては、それが常に理想的な選択肢であるとは限らず、利用可能な選択肢であるとは限りません。

このブログでは、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 ?

ログイン後にコピー