axios.get()のリクエストキャンセル処理ができない

Question

前提・実現したいこと

vue.jsを使用したwebアプリケーションを開発しております。
route変更時に実行中のリクエストのキャンセル処理も実装したいと思っていますが、うまく動きません。

パラメータなしのaxios.get(url,cancelToken)の形ではキャンセル処理を実装することができましたが、
パラメータありのaxios.get(url,params,config)の場合だとうまくいかないようです。

どのように引数を指定すれば良いでしょうか。
ご教授いただけると幸いです。

該当のソースコード

import axios from 'axios'

const state = {
  source: axios.CancelToken.source()
}
const getters = {
  source: state => state.source ? state.source: '',
}
const mutations ={
  
}
const actions = {
  async getIndividual({commit, state}, {post_id, user_id}){
    let cancelToken = {
      cancelToken: state.source.token
    }
    await axios.get('/api/individual', {
      params: {
        post_id: post_id,
        user_id: user_id
      }
    },cancelToken).then(result=>{
    //省略
    }).catch(error=>{
      if (axios.isCancel(error)){
        console.log('canceled')
      } else {
        console.log(error)
      }
    })
  },
  cancel({state}){
    if (state.source != 'undefined'){
      console.log(state.source.cancel)  
      state.source = axios.CancelToken.source()
    }
  },
}

試したこと

第二引数と第三引数を入れ替えてみる

//state,getters,mutations省略

const actions = {
  async getIndividual({commit, state}, {post_id, user_id}){
    let cancelToken = {
      cancelToken: state.source.token
    }
    await axios.get('/api/individual',cancelToken, {    //ここの順番を入れ替えました。
      params: {
        post_id: post_id,
        user_id: user_id
      }
    }).then(result=>{
    //省略
    }).catch(error=>{
      if (axios.isCancel(error)){
        console.log('canceled')
      } else {
        console.log(error)
      }
    })
  },
  cancel({state}){
    if (state.source != 'undefined'){
      console.log(state.source.cancel)  
      state.source = axios.CancelToken.source()
    }
  },
}

axios.get(url,cancelToken,params)の順番に変えてみたところキャンセル処理が実行されておりましたが、当然のことながらparamsが読み込まれずに500エラーが返ってきました。

補足情報（FW/ツールのバージョンなど）

Vue.js v2.5.17
axios v0.21.1
vuex v3.6.0

Answer 1

fetchでやるなら

const controller = new AbortController();
const signal = controller.signal;
fetch(url,{signal}).then(res=>res.text()).then(console.log);
//abort
controller.abort();

Comments

[daimi]

ありがとうございます。
fetchを利用して実装することができました。