Vue中点击单个按钮按顺序执行getPartyLeader与saveParty方法的实现

问题根因 #

你之前直接在saveParty开头调用getPartyLeader没有生效，是因为getPartyLeader内部是异步接口请求，调用后不会等待接口返回就会继续执行后续的保存逻辑，此时partyLeader的数据还没被接口返回值更新，自然无法拿到正确的数据提交。

解决步骤 #

1. 修改getPartyLeader方法，返回Promise #

让方法返回内部的异步请求实例，才能判断它什么时候执行完成：

getPartyLeader(){
  var leadername = this.leaderName;
  // 新增return返回Promise对象
  return PartyLeaderDataService.findByName(leadername)
  .then(response => {
    this.party.partyLeader.id = response.data.id
    this.party.partyLeader.name = response.data.name
    this.party.partyLeader.appearance = response.data.appearance
    console.log(this.party)
  })
  .catch(e => {
    console.log(e);
    // 抛出错误，方便上层捕获异常中断流程
    throw e
  });
}

2. 新增合并提交方法，用async/await控制执行顺序 #

新增一个统一的提交触发方法，先等待getPartyLeader执行完成，再调用保存逻辑：

// 放在methods配置中
async handleSubmit() {
  try {
    // 等待获取党领袖接口返回、数据更新完成
    await this.getPartyLeader()
    // 再执行提交保存
    await this.saveParty()
  } catch (err) {
    // 任意一步请求失败都会走到这里，可自行添加用户可见的错误提示
    console.error('提交失败：', err)
  }
}

3. 替换模板中的按钮为单个提交按钮 #

把原来两个按钮删掉，换成绑定新方法的单个按钮即可：

<button @click="handleSubmit" class="btn btn-success">Submit</button>

可选优化 #

可以加加载状态防止用户重复点击：

1. 在data中新增loading: false
2. 在handleSubmit开头设置this.loading = true，可以加finally块不管成功失败都重置加载状态：

async handleSubmit() {
  this.loading = true
  try {
    await this.getPartyLeader()
    await this.saveParty()
  } catch (err) {
    console.error('提交失败：', err)
  } finally {
    this.loading = false
  }
}

3. 按钮上添加disabled绑定防止重复提交：

<button :disabled="loading" @click="handleSubmit" class="btn btn-success">Submit</button>

内容的提问来源于stack exchange，提问作者LardinoisJosse