1、参考链接

参照了下面这位博主的代码
参考链接

2、背景

有4个tab页，鼠标经过切换数据，为了避免频繁请求数据，定义了一个数组保存每个tab页的数据。
一开始是这样做的，在tab第一次鼠标经过的时候去请求数据保存下来，衍生出了一个问题，就是在调用时，鼠标快速经过另一个tab，此时请求数据的函数还没有执行完，这时候tab值发生了改变，数据最后被存储在后一个的tab项里了，导致数据错乱

3、解决思路

为了避免数据错乱的问题，决定页面加载时把所有数据先请求过来，用的for循环，此时会遇到跟上面一样的问题，即数据请求慢的问题，这样在循环走后，就只能获取到最后一个的数据了
使用async await 解决这个问题

// 先声明一个函数，这个函数返回一个promise，promise只有执行返回了resolve才证明已经走完了函数
    getPromise(str = "success") {
      return new Promise((resolve) => {
        ProjectsNivList(this.project)
          .then((res) => {
            if (res.code === 0) {
            //中间是处理请求回来的数据，就不展示了
              resolve(str);
            }
          })
          .catch((err) => {});
      });
    },
//async表示，这个函数有异步操作
    async getnotice() {
      for (let i = 1; i <= 4; i++) {
        console.log("i", i);
        this.project.type = i;
        //await this.getPromise这个异步执行完成后，才继续i++，接着执行异步
        await this.getPromise();
      }
      //这里是因为我数据用的this.projectData渲染的，为了避免频繁改变this.projectData有闪屏，用了this.projectDataback和this.tipsback先保存数据再赋值
      this.project.type = 1;
      this.tips=this.tipsback;
      this.projectData=this.tipsback[1];
      console.log('最终结果',this.tips,this.projectData)
    },

其中async需要返回的是一个promise对象

参考写法