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 ?

로그인 후 복사