JavaScript에서 가져오기 요청을 시간 초과하는 방법

때때로 API에서 데이터를 가져올 때 긴 지연을 관찰했을 수 있습니다. 클라이언트 측의 네트워크 문제, DNS 조회 문제, 응답하는 데 너무 오래 걸리는 서버 등과 같은 다양한 이유로 인해 발생할 수 있습니다.

이러한 시나리오에서는 일정 시간이 지난 후 요청을 취소하고 일부 오류 메시지를 사용하여 사용자에게 동일한 사실을 알리는 것이 좋습니다.

이전 기사에서 how to cancel previous requests in fetch에 대해 설명했습니다. 여기서도 비슷한 접근 방식을 사용할 것입니다.

서버 설정

코드를 테스트해야 하는 경우 API 엔드포인트가 필요합니다. 이미 있는 경우 이 섹션을 건너뛸 수 있습니다.

전역적으로 설치json-server:

npm install -g json-server

빈 폴더에서 다음 데이터를 사용하여 db.json라는 파일을 만듭니다.

{"users":[{"id":1,"name":"Leanne Graham","username":"Bret","email":"[email protected]","address":{"street":"Kulas Light","suite":"Apt. 556","city":"Gwenborough","zipcode":"92998-3874","geo":{"lat":"-37.3159","lng":"81.1496"}},"phone":"1-770-736-8031 x56442","website":"hildegard.org","company":{"name":"Romaguera-Crona","catchPhrase":"Multi-layered client-server neural-net","bs":"harness real-time e-markets"}},{"id":2,"name":"Ervin Howell","username":"Antonette","email":"[email protected]","address":{"street":"Victor Plains","suite":"Suite 879","city":"Wisokyburgh","zipcode":"90566-7771","geo":{"lat":"-43.9509","lng":"-34.4618"}},"phone":"010-692-6593 x09125","website":"anastasia.net","company":{"name":"Deckow-Crist","catchPhrase":"Proactive didactic contingency","bs":"synergize scalable supply-chains"}},{"id":3,"name":"Clementine Bauch","username":"Samantha","email":"[email protected]","address":{"street":"Douglas Extension","suite":"Suite 847","city":"McKenziehaven","zipcode":"59590-4157","geo":{"lat":"-68.6102","lng":"-47.0653"}},"phone":"1-463-123-4447","website":"ramiro.info","company":{"name":"Romaguera-Jacobson","catchPhrase":"Face to face bifurcated interface","bs":"e-enable strategic applications"}},{"id":4,"name":"Patricia Lebsack","username":"Karianne","email":"[email protected]","address":{"street":"Hoeger Mall","suite":"Apt. 692","city":"South Elvis","zipcode":"53919-4257","geo":{"lat":"29.4572","lng":"-164.2990"}},"phone":"493-170-9623 x156","website":"kale.biz","company":{"name":"Robel-Corkery","catchPhrase":"Multi-tiered zero tolerance productivity","bs":"transition cutting-edge web services"}},{"id":5,"name":"Chelsey Dietrich","username":"Kamren","email":"[email protected]","address":{"street":"Skiles Walks","suite":"Suite 351","city":"Roscoeview","zipcode":"33263","geo":{"lat":"-31.8129","lng":"62.5342"}},"phone":"(254)954-1289","website":"demarco.info","company":{"name":"Keebler LLC","catchPhrase":"User-centric fault-tolerant solution","bs":"revolutionize end-to-end systems"}},{"id":6,"name":"Mrs. Dennis Schulist","username":"Leopoldo_Corkery","email":"[email protected]","address":{"street":"Norberto Crossing","suite":"Apt. 950","city":"South Christy","zipcode":"23505-1337","geo":{"lat":"-71.4197","lng":"71.7478"}},"phone":"1-477-935-8478 x6430","website":"ola.org","company":{"name":"Considine-Lockman","catchPhrase":"Synchronised bottom-line interface","bs":"e-enable innovative applications"}},{"id":7,"name":"Kurtis Weissnat","username":"Elwyn.Skiles","email":"[email protected]","address":{"street":"Rex Trail","suite":"Suite 280","city":"Howemouth","zipcode":"58804-1099","geo":{"lat":"24.8918","lng":"21.8984"}},"phone":"210.067.6132","website":"elvis.io","company":{"name":"Johns Group","catchPhrase":"Configurable multimedia task-force","bs":"generate enterprise e-tailers"}},{"id":8,"name":"Nicholas Runolfsdottir V","username":"Maxime_Nienow","email":"[email protected]","address":{"street":"Ellsworth Summit","suite":"Suite 729","city":"Aliyaview","zipcode":"45169","geo":{"lat":"-14.3990","lng":"-120.7677"}},"phone":"586.493.6943 x140","website":"jacynthe.com","company":{"name":"Abernathy Group","catchPhrase":"Implemented secondary concept","bs":"e-enable extensible e-tailers"}},{"id":9,"name":"Glenna Reichert","username":"Delphine","email":"[email protected]","address":{"street":"Dayna Park","suite":"Suite 449","city":"Bartholomebury","zipcode":"76495-3109","geo":{"lat":"24.6463","lng":"-168.8889"}},"phone":"(775)976-6794 x41206","website":"conrad.com","company":{"name":"Yost and Sons","catchPhrase":"Switchable contextually-based project","bs":"aggregate real-time technologies"}},{"id":10,"name":"Clementina DuBuque","username":"Moriah.Stanton","email":"[email protected]","address":{"street":"Kattie Turnpike","suite":"Suite 198","city":"Lebsackbury","zipcode":"31428-2261","geo":{"lat":"-38.2386","lng":"57.2232"}},"phone":"024-648-3804","website":"ambrose.net","company":{"name":"Hoeger LLC","catchPhrase":"Centralized empowering task-force","bs":"target end-to-end models"}}]}

이제 터미널을 열고 다음을 실행하십시오.

json-server --watch db.json -d 10000

이렇게 하면 서버가 시작되고 http://localhost:3000/users에서 사용자 목록에 액세스할 수 있어야 합니다. 위 URL은 json-server를 시작하는 동안 10초 지연을 언급했기 때문에 10초 후에 응답합니다.

데이터 가져오기 기능 만들기

아래와 같이 fetch API을 사용하여 서버에서 데이터를 가져올 수 있습니다.

const loadData = async url => {
  const response = await fetch(url)
  const data = await response.json()
  console.log({ data })
}
loadData("http://localhost:3000/users")

브라우저 콘솔이나 애플리케이션에서 위의 코드를 실행하면 10초 후에 콘솔에 기록된 데이터를 볼 수 있어야 합니다.

타임아웃 기능 추가

이제 loadData 함수에 시간 초과 기능을 추가해 보겠습니다.

const loadData = async (url, timeoutThreshold) => {
  const controller = new AbortController()

  const timeoutId = setTimeout(() => {
    controller.abort()
  }, timeoutThreshold)
  const response = await fetch(url, {
    signal: controller.signal,
  })
  clearTimeout(timeoutId)
  const data = await response.json()
  return data
}

여기에서는 제한 시간 값을 5초로 전달합니다.
5초 후에 controller.abort() 함수 내에서 setTimeout를 호출합니다. 또한 중단될 수 있도록 AbortController 신호를 가져오기 호출에 전달합니다.

try-catch 블록 내에서 위의 함수를 호출하고 예외가 AbortError로 인해 발생했는지 확인한 다음 그에 따라 오류를 처리할 수 있습니다.

const getData = async () => {
  try {
    const data = await loadData("http://localhost:3000/users", 5000)
    console.log({ data })
  } catch (error) {
    if (error.name === "AbortError") {
      // handle error
    }
  }
}
getData()