Question

仅在this.$refs.form.submit()完成后如何运行saveMapAsReceipt()？

HTML：

<form ref="form" ...>
    <input @submit.prevent="onSubmit" @click="submit" type="button" name="save" value="Update" class="btn btn-primary btn btn-primary" id="submit-id-save" />
</form>

Vue.js

methods: {
  saveMapAsReceipt() {
    this.printPlugin.printMap('A4Portrait page', 'Miles');
    self = this;
    this.routingMap.on('easyPrint-finished', e => {
        var reader = new window.FileReader();
        reader.readAsDataURL(e.event);
        reader.onloadend = function () {
          base64data = reader.result;
          self.receipt_source = base64data;
        }
    });
  },
  submit: function() {
    this.saveMapAsReceipt();
    this.$refs.form.submit();
  },
}

Answer 1

将Labda函数传递给您的saveMapAsReceipt方法（closure），并在要让闭包像这样执行的地方调用闭包。

methods: {
    SaveMapAsReceipt(closure){
        this.printPlugin.printMap('A4Portrait page', 'Miles');
        self = this;
        this.routingMap.on('easyPrint-finished', e => {
            var reader = new window.FileReader();
            reader.readAsDataURL(e.event);
            reader.onloadend = function () {
              base64data = reader.result;
              self.receipt_source = base64data;
            }

            closure();
        });
    },
    submit: function() {
        let that = this;
        this.saveMapAsReceipt(function(){
            that.$refs.form.submit();
        });
    },
}

Answer 2

这是异步流控制中的一个常见问题，承诺应解决：

methods: {
  async saveMapAsReceipt() {
    this.printPlugin.printMap('A4Portrait page', 'Miles');
    const e = await new Promise(resolve => this.routingMap.on('easyPrint-finished', resolve));
    var reader = new window.FileReader();
    reader.readAsDataURL(e.event);
    await new Promise(resolve => reader.onloadend = resolve);
    this.receipt_source = reader.result;
  },
  async submit() {
    await this.saveMapAsReceipt();
    this.$refs.form.submit();
  },
}

self = this是一个错误，因为self是指全局变量。该结构带有ES6箭头是多余的。

仅当另一个函数完成时才运行一个函数

2 个答案: