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() 메서드를 활용하고 있습니다.

우리는 주어진 시간에 해결하고 실제 API 호출과 경쟁하는 더미 Promise를 생성하여 API 응답을 받거나 제한 시간이 지난 후 거부를 약속합니다.

이 코드가 도움이 되었기를 바랍니다.?!

필요에 따라 자유롭게 맞춤 설정하고 어떤 느낌이었는지 알려주세요 ❤️

위 내용은 JavaScript에서 비동기 시간 초과를 처리하기 위한 AbortController의 대안의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!