根據 https://blog.csdn.net/sir1241/article/details/76099529 範例所示：

首先該範例在 Vue 實體中的 source ，初始化了 source 物件，而這個 source 物件包含了 token 以及 cancel 屬性：

this.source = this.axios.CancelToken.source(); // 这里初始化source对象

而 token 屬性在 axios 原始碼當中最終會調用 CancelToken 構造函式，並記錄了 promise 的請求：

function CancelToken (executor){
    // ...
    var resolvePromise;
    this.promise = new Promise(function(resolve){
        resolvePromise = resolve;
    })
    var token = this; // 這裡
    executor(function cancel(message){
        if(token.reason){
            return;
        }
        token.reason = new Cancel(message);
        resolvePromise(token.reason);
    })
}

後續主要就是依靠 source 內指向的 promise 並藉由 cancel 方法來操控該 promise 的狀態。

TL;DR

簡單的來說，axios 會去觀察 token.promise，如果在發送 request 前，該狀態就已經改變了，他就會去取消 呼叫這個方法的請求。

至於將你提供的範例 source 物件初始化在 this.source 只是 Vue.js 中 MVVM 的思維，目的是將 source 物件的位置指向同一處。

有誤的話煩請其他大神指正了，感溫。

官方說的

參考