多个接口回调的一些处理方式

背景：

在工作中遇到这样一个需求，下拉列表中选项有锁定和未锁定版本，未锁定版本能够自定义添加一些功能。锁定版本只能查看和编辑功能；所以需要添加一个拷贝版本按钮，将已锁定版本中的数据进行copy，然后能够添加自定义功能操作。

点击拷贝版本之后，下拉框需要选择到拷贝版本之后的选项，涉及到多个接口，获取下拉框列表、点击版本拷贝的接口、根据已选择
的拷贝版本去获取tab的列表数据，根据已经选择的tab选项获取具体的tab内容。

具体操作：

开始时，没有仔细理清思路，直接通过同步的方式去调用该接口，代码块如下:

copyVersion() {
this.$http.post('xxxx').then(res => {
    this.form.id = res.data.id
    this.getSelectList()
    this.changeVersion(this.form.id)
  })
}

这样会导致，form.id已经发生变化了，但是下拉框列表中并未选中copy之后的版本。后面理清思路之后，发现只需要先获取到id，获取到id之后再去请求下拉列表，再次去触发下拉列表中的changeVersion(id)，函数即可解决这个问题。 函数改写如下，首先将copyVersion()函数进行拆解

async copyVersion() {
  await this.copy()
  this.getSelectList().then(() => {
    this.changeVersion(this.form.historyVersion)
  })
}

copy() {
  return this.$http.post('xx').then(res => {
    this.form.id = res.data.id || undefined
    ···
  })
}

getSelectList() {
  return this.$http.get('xx').then(res => {
   this.selectList = res.data || []
   ···
 })
}

changeVersion(val) {
  if(val) {
    this.getModuletab()
    ····
  } else {
    this.getModuletab()
    ····
  }
}

getModuletab() {
  this.$http.get('xx').then(res => {
    this.tabList = res.data.map(xxxx)
    this.activeTab = xxxxx
    if(this.activeTab) this.getTabData()
    ···
  })
}

如上写法，能够正常拿到后端返回过来的id然后进行展示，并且实现需求功能。

结尾

这也算是回调第一次实际运用，也是本人第一次在掘金写相关资料，作为一种记录或者激励，如有更好的方法，烦请各位批评指正。