Vue.js+Axiosでリクエストをキャンセル(中断)する

概要

ボタンを押すことによって非同期通信が行われる様な場合、
ボタンの連打によって複数回数実行されると最後に実行されるリクエスト到達まで遅くなってしまう。
この場合はv-modelによってボタンの活性制御をすれば良いが事情があってできない場合はaxiosのキャンセルトークン利用して、
最後にボタンが押された際の非同期通信処理のみ実行するようにする。

(実際に使用した箇所としてFullCalendar-vueで月を変更するとその月の情報のみを非同期通信で取得するロジックの場合
月の変更ボタンを連打されてしまうと上記の問題が発生するのでキャンセルトークンを使用しました
これに関してはもっといい方法があるかも)

下記の例ではcreateUserメソッドが複数回連続して呼び出される前提

CancelTokenを使用して以前のリクエストを中断する

<script>直下

test.vue

const axios = require("axios");
const CancelToken = axios.CancelToken;
let cancel;

methods部分

test.vue

createUser(){
    if (cancel) {
        console.log("Cancel!!!");
        cancel();
    }

    axios
        .post("/api/users", {
            id: 5,
            name: "John",
        }, {
            cancelToken: new CancelToken(function executor(c) {
                cancel = c;
            }),
        })
        .then((response) => {
            console.log(response.data);
        })
}

やり方はもう1つあるがスマートに書けるのでこの記述方法を採用した

詳しくは公式のGitHub参照