NuxtJSでaxiosのリクエストをキャンセルする

NuxtJSでSSR + SPAでコンテンツをaxiosで取得するよくあるページを作っていたら、リンクを連打するとこんな感じになった。
言葉で説明するの大変なのでブログ用にTwitterに動画あげた。

NuxtJSなどのSPA + Ajaxでコンテンツを非同期取得してるやつで、ページリンク連打すると表示も非同期になるよくあるやつ。axiosのcancelToken使って解決できた。※画面は開発中（略 pic.twitter.com/5hpBJRnsFp
— uyamazak - 🐦 (@uyamazak) 2021年6月24日

バージョンはここらへん。TypeScript、Composition APIを使ってます。

  "dependencies": {
    "@nuxtjs/axios": "^5.13.4",
    "@nuxtjs/composition-api": "^0.23.4",
    "@nuxtjs/proxy": "^2.1.0",
    "cookie-universal-nuxt": "^2.1.4",
    "core-js": "^3.12.1",
    "dayjs": "^1.10.4",
    "nuxt": "^2.15.6",
    "vue-slick-carousel": "^1.0.6",
    "vuejs-paginate": "^2.1.0"
  },

解決策としては、フォームみたいに、完了するまでクリックできなくするっていう方法もあるけど、ページ送りみたいな普通のリンクではやりたくない。

そこで、連打されたとき前回のをキャンセルする方法ないかと調べたところ、axiosにそういう機能がついてることを知った。

NuxtJSのaxiosモジュールを使っているけど使い方はaxiosと同じ
https://axios.nuxtjs.org/usage/#cancel-token

最初Promiseでできるかと思ったけど難しそうだった。

やってることはこの記事と同じだけど、NuxtJSだったり、Composition APIだったり、TypeScriptだったりするのでメモ。
siosio.hatenablog.com

開発中だけど必要そうなコードを抜粋、編集したやつ（動かない

import {
  defineComponent,
  useAsync,
  useContext,
  ssrRef,
  watch,
  ref
} from '@nuxtjs/composition-api'
import { JobListApiResponse, Job } from '../types'

export default defineComponent({
  validate({ query }) {
    if (!query.page) {
      return true
    } else if (typeof query.page === 'string') {
      return /^\d+$/.test(query.page)
    }
    return false
  },
  setup() {
    const { $axios, query } = useContext()
    const cancelToken = $axios.CancelToken
    const cancelSource = ref(cancelToken.source())
    const toPageNumber = (number: any): number => {
      // validateでチェックしてるので最低限
      if (typeof number === 'string') {
        return Number(number)
      }
      return 1
    }
    currentPage.value = toPageNumber(query.value.page)
    const fetchJobs = async () => {
      const page = toPageNumber(query.value.page)
      // 前回のをキャンセル
      cancelSource.value.cancel('連打かな？')
      // 新しくセット
      cancelSource.value = cancelToken.source()
      try {
        const response = await $axios.$get<JobListApiResponse>(
          '/api/path',
          {
            params: { page },
            cancelToken: cancelSource.value.token
          }
        )
        // response使ってデータをセットする処理
      } catch (error) {
        console.error(error)
      }
    }
    useAsync(fetchJobs)
    // queryに変更あったら再実行
    watch(query, fetchJobs)
    return {
      // 省略
    }
  }