多个API嵌套应该怎么操作才更加优雅、更加方便、更加润？

这是绝对错误的写法，在async、await的语法糖支持下，下面写法的问题

1. 不直观 优秀的代码应该直观
2. 错误处理时也不够直观 除非所有的错误后端处理 本次考虑前端处理错误提示
3. 可复用，可扩展的能力低

const getTableListData = () => {
  getTableListDataApi({ .... })
    .then(() => {
    getTableListDataApi1({ .... })
      .then(() => {
      getTableListDataApi2({ .... })
        .then(() => {
          // TODO
      })
    })
  })
  .catch((err) => { 
      Message.error(err.message)
  })
}

解决第一个问题

const getTableListData = async() => {
    try {
      const tableData = await getTableListDataApi({ .... })
      const tableData1 =  await getTableListDataApi1(tableData)
      const tableData2 = await getTableListDataApi2(tableData1)
      // TODO
    } catch(err) {
        Message.error(err.message)
    }
}

解决第二个问题 解决第三个问题

const getTableListData = async(params) => {
    try {
        const data = await getTableListDataApi(params)
        // TODO
        return data
    } catch(err) {
        // TODO
        return new Error(err)
    }
}
const getTableListData1 = async(params) => {
    try {
        const data = await getTableListDataApi1(params)
        // TODO
        return data
    } catch(err) {
        // TODO
        return new Error(err)
    }
}
const getTableListData2 = async(params) => {
    try {
        const data = await getTableListDataApi2(params)
        // TODO
        return data
    } catch(err) {
        // TODO
        return new Error(err)
    }
}
// 这种就是很好的方法
const handlerTableListData = async() => {
    try {
      const tableData = await getTableListData({ .... })
      const tableData1 =  await getTableListData1(tableData)
      const tableData2 = await getTableListData2(tableData1)
      // TODO
    } catch(err) {
        Message.error(err.message)
    }
}

还有一种pipe的方式 更优雅的组合函数 看团队能力 有时会被理解为装逼

const getTableListData = async(params) => {
    try {
        const data = await getTableListDataApi(params)
        // TODO
        return data
    } catch(err) {
        // TODO
        return new Error(err)
    }
}
const getTableListData1 = async(params) => {
    try {
        const data = await getTableListDataApi1(params)
        // TODO
        return data
    } catch(err) {
        // TODO
        return new Error(err)
    }
}
const getTableListData2 = async(params) => {
    try {
        const data = await getTableListDataApi2(params)
        // TODO
        return data
    } catch(err) {
        // TODO
        return new Error(err)
    }
}
// 此种方法特别注意 需要参数为一元
const handlerTableListData = pipe(
    getTableListData,
    andThen(getTableListData1),
    andThen(getTableListData2),
    otherwise((err) => {Message.error(err)})
)