nuxtjsのaxios-moduleによるリクエストをキャンセルする

2019-10-18

概要

axiosでgetリクエストをする際、同じパスでパラメータだけ変えて連続してリクエストをする場合などは一番最後のリクエストのみ処理し、それ以外はキャンセルしたかった。

nuxtだとaxios-moduleを利用することが多いと思うが 現状axios-moduleのみではリクエストのキャンセルができないっぽい。 なのでaxios自体のcancel tokenを使って実装する。

実装

import { CancelToken } from 'axios' // axiosからCancelTokenをインポートexport default { data() { return { params: { aiueo: null }, cancel: null } }, methods: { example() { if (this.cancel) { this.cancel() } let cancel this.$axios.$get('/example/', { params: this.params, cancelToken: new CancelToken(function executor(c) { cancel = c }) }).then((res) => { console.log('処理') }).catch(function(thrown) { console.log('キャンセル'); }) this.cancel = cancel // リクエストしたあとにcancelのmethodをdataに格納しておく } } }

これでparamを変えてexample()を連続で叩いた際には一番最後のものだけ処理され、ほかはキャンセルされる。

感想

axiosとaxios-moduleが混在するのが気持ち悪いから別途ラップしたものをpluginsに定義して使ったほうが良いかも