데이터 로더 취소하기

데이터 로더는 AbortSignal을 전달받으며, 이 신호를 fetch 및 다른 Web API에 넘겨 내비게이션이 취소될 때 진행 중인 요청을 취소할 수 있습니다. 오류나 새 내비게이션 때문에 내비게이션이 취소되면 signal이 abort되고, 이를 사용하는 모든 요청도 함께 중단됩니다.

interface Book {
  title: string
  isbn: string
  description: string
}
function fetchBookCollection(options: {
  signal?: AbortSignal
}): Promise<Book[]> {
  return {} as any
}
// ---cut---
import { defineBasicLoader } from 'vue-router/experimental'
export const useBookCollection = defineBasicLoader(
  async (_route, { signal }) => {
    return fetchBookCollection({ signal })
  }
)

이는 진행 중인 호출을 취소하기 위해 AbortSignal을 사용하는 미래의 Navigation API 및 다른 웹 API와도 일치합니다.

모범 사례

데이터 로더 구현에 따라 진행 중인 요청을 취소하지 않는 편이 더 나을 수도 있습니다. 예를 들어 Pinia Colada를 사용할 때는 요청을 계속 유지하고 결과를 캐시하여 이후 내비게이션에서 활용하는 편이 더 나을 수 있습니다. 문서를 꼭 읽어 보세요.