多层异步请求怎么写才优雅？

Question

场景：

有4个异步Promise请求需要执行，并且每个异步请求需要拿到上一个异步的正确结果才允许执行，不然整个函数就结束

我现在的操作：

现在我是直接在每个异步请求后面加上.then，然后在then里面再判断返回的res是否满足我的条件，如果满足，就继续执行异步请求，如果不满足，就直接return

疑问

1. 感觉每个then里面又加if判断，感觉很臃肿
2. 异步嵌套是好的吗，我感觉整体的函数写下来好臃肿
3. 用async和await来代替如何
4. 每个返回的结果都要用if else来判断是否合理，感觉写了好多if else啊，一般是怎么减少if else语句的

代码片段

translate({
          str: this.data.DescriptionContent
        }).then((translateRes) => {
          // this.judgeError(translateRes.data.Code);
          let chinesePrompt = translateRes.data.Data;
          log.info('调用创作接口')
          // 调用创作接口生成图片
          createImage({
            prompt: chinesePrompt,
            batch_size: this.data.useAmount,
            width: 402,
            height: 530
          }).then((resCreate) => {
            // this.judgeError(resCreate.data.code);
            // 添加使用订单
            log.info('调用makeOrder接口')
            makeOrder({
              user_id: wx.getStorageSync('userInfo').UserId,
              amount: 0,
              number: this.data.useAmount,
              describe: "使用"
            }).then((res) => {
              if (res.data.Code != 200) {
                setTimeout(() => {
                  wx.showToast({
                    title: '网络错误',
                    icon: 'error',
                    duration: 2000
                  })
                })
                this.setData({
                  showImageContainer: false,
                  placeholder: '请输入创作内容',
                  DescriptionContent: '',
                })
                return;
              }

              // 将图片放入页面中
              resCreate.data.data.images.map((item, index) => {
                let obj = {}
                item = 'data:image/jpeg;base64,' + item
                obj.url = item;
                obj.love = false;
                this.setData({
                  ['imageUrl[' + index + ']']: obj
                })
              })
              
            })
          })
        }

Answer 1

用 async/await。现在已经是 2023 年了，async function 是 2017 年的东西，早该全面 async 了。

减少 if/esle 一般策略是提前退出。比如，原先是

if (成功1) {
  // 做些事情1
  if (成功2) {
    // 做些事情2
    ....
  } else {
    退出2;
  }
} else {
  退出1;
}

改为：

if (失败1) 退出1;
// 做些事情1
if (失败2) 退出2;
// 做些事情
....

就会清晰简单很多。

Answer 2

来看看这篇，以及后面的推荐文章

• 理解 JavaScript 的 async/await - 边城客栈 - SegmentFault 思否