异步链路

普通Promise

const promise = new Promise((resolve, reject) => {
  const res = true;
  // An asynchronous operation.
  if (res) {
    resolve('Resolved!');
  }
  else {
    reject(Error('Error'));
  }
});
promise.then((res) => console.log(res), (err) => console.error(err));

then地狱

滥用promise.then会变成then地狱,举例:

this.$confirm(`是否${row.status == 0 ? '关闭' : '开启'}项目`, '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning'
}).then(() => {
  updateProject(row.id, {
    status: row.status == 0 ? 1 : 0
  }).then(res => {
    if (res.status != 200) {
      this.$message.error(res.msg)
      return
    } else {
      this.$message.success('更新成功!')
      this.getList()
    }
  })
})

就应该改成:

this.$confirm(`是否${row.status == 0 ? '关闭' : '开启'}项目`, '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning'
}).then(() => updateProject(row.id, {
  status: row.status == 0 ? 1 : 0
})).then(res => {
  if (res.status != 200) {
    this.$message.error(res.msg)
    return
  } else {
    this.$message.success('更新成功!')
    this.getList()
  }
})

说白了就是每个then接一个promise即可。

Promise.all

多个promise并行,通过Promise.all来优化:

const [category, departments, groups, projects, { data: users }] = await Promise.all([
  this.$store.dispatch('working/getWorkingCategory'),
  this.$store.dispatch('working/getDepartments'),
  this.$store.dispatch('working/getGroups'),
  this.$store.dispatch('working/getProjects'),
  getAllUsers()
])