javascript 使用async/await简化异步操作实践

实现的功能简述： 新增申请单时，申请单的业务日期由两个因素决定：

1. 异步获取的仓库的业务日期。
2. 异步获取的日期偏移天数规则。

业务日期 = 仓库的业务日期 + 偏移天数。比如仓库的业务日期是2023-01-01,偏移天数是5，那么最终的业务日期是2023-01-06

（一）简单实现：方法嵌套执行（“函数瀑布”）

最简单的方式就是：在获取了仓库的业务日期之后，再调异步获取规则的方法。在日期和规则都获取到之后，再计算最终业务日期。

1. 代码

data() {
    return {
      dateRule: 0,
      warehouseDate: '',
    }
},

methods:{
    initData() {
      this.getWarehouseDate()
    },
    getWarehouseDate() {
      setTimeout(() => {
        this.warehouseDate = '2023-01-01'
        console.log("获取仓库业务日期：", this.warehouseDate, ";当前时间：", new Date().toLocaleTimeString())
        this.getDateRule()
      }, 2000)
    },
    getDateRule() {
      setTimeout(() => {
        this.dateRule = 5
        console.log("获取日期规则：", this.dateRule, ";当前时间：", new Date().toLocaleTimeString())

        this.getOffsetDate(this.warehouseDate, this.dateRule)
      }, 1000)
    },
    getOffsetDate(dayStr,  offset) {
      let dd = new Date(dayStr);
      dd.setDate(dd.getDate() + offset);

      console.log(dd.toLocaleDateString())
    },
}

2. 执行结果

通过结果我们可以看到：
即使获取仓库日期需要两秒，还是先执行了。程序可以按序执行并计算出期望的结果。

3. 存在问题

但是这样写有两个问题：

1. 如果再来一个异步操作（比如编辑时，要先异步获取申请单，再获取仓库的业务日期，再获取日期规则），或者更多个异步函数，代码结构会变得极其复杂，可读性差。
2. 复杂的代码结构也会导致维护困难，扩展性太差。

（二）使用async/await

1.代码

    async initData() {
      await this.getWarehouseDate()
      await this.getDateRule()
      this.getOffsetDate(this.warehouseDate, this.dateRule)
    },
     getWarehouseDate() {
      return new Promise((resolve) => {
        setTimeout(() => {
          this.warehouseDate = '2023-01-01'
          console.log("获取仓库业务日期：", this.warehouseDate, ";当前时间：", new Date().toLocaleTimeString())
          resolve(this.warehouseDate)
        }, 1000)
      })
    },
    getDateRule() {
      return new Promise((resolve)=>{
        setTimeout(() => {
          this.dateRule = 5
          console.log("获取日期规则：", this.dateRule, ";当前时间：", new Date().toLocaleTimeString())
          resolve(this.warehouseDate)
        }, 2000)
      })
    },
    getOffsetDate(dayStr,  offset) {
      let dd = new Date(dayStr);
      dd.setDate(dd.getDate() + offset);

      console.log('计算最终日期：',dd.toLocaleDateString())
    },

2. 执行结果

可以看到按序执行了。
像写同步代码一样写异步代码。