取消/中止Vue组件上的Axios发布

Question

我有一个Vue组件，该组件具有值列表，当您选择这些值时，这会更改选定的数组，并最终将其发布到端点。

我有一个问题，如果用户垃圾邮件单击这些值，因为每次更改都会创建一个单独的帖子，所以我希望这样做，以便如果用户选择另一个项目，则当前待处理的帖子将被取消，因此新值是发布并使用两个选定项更新端点。

但是我在中止当前axios请求时遇到问题，我提供了以下代码。没有错误，请求只是不会取消。

export default {
    props: {
        endpoint: {
            default: '',
            type: String
        },
        parameters: {
            default: null,
            type: Object
        }
    },
    data: () => ({
        loaded: false,
        selected: [],
        save: [],
        data: [],
        cancel: undefined
    }),
    methods: {
        update() {

            const self = this;

            let params = this.parameters;
            params.data = this.selected;

            this.$root.$emit('saving', {
                id: this._uid,
                saving: true
            });

            if (self.cancel !== undefined) {
                console.log('cancel');
                this.cancel();
            }

            window.axios.post(this.endpoint + '/save', params, {
                cancelToken: new window.axios.CancelToken(function executor(c) {
                    self.cancel = c;
                })
            }).then(() => {
                this.$nextTick(() => {
                    this.loaded = true;
                    this.$root.$emit('saving', {
                        id: this._uid,
                        saving: false
                    });
                });
            }).catch(function (thrown) {
                if (window.axios.isCancel(thrown)) {
                    console.log('Request canceled', thrown.message);
                }
            });
        }
    }
}

我在Vue应用程序上创建了一个Axios全局实例。