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

非同期 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 ?

私たちは具体的に何をしているのでしょうか？

JavaScript では、Promise 自体をキャンセルする正式な方法はありません。

ここでは Promise.race() メソッドを利用しています。

指定された時間内に解決するダミーの Promise を作成し、実際の API 呼び出しと競合させることで、API 応答を取得するか、タイムアウトを超えた後に Promise が拒否されます。

このコードがお役に立てば幸いです?!

必要に応じて自由にカスタマイズして、感想をぜひお知らせください ❤️

以上がJavaScript で非同期タイムアウトを処理するための AbortController の代替の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。