Vue项目中使用 Promise、async/await 处理有先后顺序的页面请求

【场景】：列表查询页面，列表展示的部分字段需要通过字典映射展示，而映射关系的字典也是通过接口获取的，所以，需要在所有映射关系的字典都获取完成之后，才能获取列表。

（自己摸索的，如果不对，那就 sorry）

  mounted() {
	// 获取字典信息
    this.getDictList();
  },
  methods: {
    // async 包装首先调用的方法，获取字典信息
    async getDictList() {
      /* 注意！！!因为我们这个项目请求字典信息是公用方法，所以像下面这样写，如果字典请求方法不同，灵活运用，只要把所有请求都放到 dictRequestList数组里就行 */
      // dictTypes：所有需要获取的字典
      const dictTypes = ['dict1', 'dict2', 'dict3'];
      // dictRequestList：存放字典请求的数组
      const dictRequestList = [];
      dictTypes.forEach((item) => {
      	// 循环创建字典请求，加入数组
        const params = { dictType: item };
        dictRequestList.push(
          // getDictRequst是封装的 axios请求
          getDictRequst(params).then((res) => {
          	console.log(item);
            switch (item) {
              case 'dict1':
                this.dictList1 = res;
                this.dictList1.unshift({
                  key: '-1',
                  value: '全部',
                });
                break;
              case 'dict2':
                this.dictList2 = res;
                this.dictList2.unshift({
                  key: '-1',
                  value: '全部',
                });
                break;
              case 'dict3':
                this.dictList3 = res;
                this.dictList3.unshift({
                  key: '-1',
                  value: '全部',
                });
                break;
              default:
                break;
            }
          }),
        );
      });
      // await 使用 Promise.allSettled()方法包装 dictRequestList，当 dictRequestList中的所有请求都结束（不管是 resolve还是 reject）后，包装成的 Promise对象才结束
      await Promise.allSettled(dictRequestList);
      // dictRequestList中的所有字典请求都结束后，请求列表信息
      this.queryTaskList();
    },
    // 获取列表信息
    queryTaskList() {
      console.log('---list---');
      //...请求到列表之后循环使用 字典信息进行各个字段的映射处理
    }

验证：通过控制台能观察到，在获取字典的请求都响应（回调中的 console打印信息都打印出来）之后，才执行 列表查询方法（queryTaskList方法中的 console打印）。

// 打印结果 —— 获取字典请求响应中的打印顺序不固定，看各个接口请求的响应快慢
// dist2
// dist1
// dist3
// ---list---