Vue 定时任务，通过async与await实现获取实时数据（async与await的使用）

需求分析：

做的项目中需要显示一个实时数据，每隔一个固定的时间段就向后端发送一次数据，拿到实时数据并展示，如果切换页面，暂停发送请求。

所需技术：

async与await的使用。

async 函数一定会返回一个 promise 对象。如果一个 async 函数的返回值看起来不是 promise，那么它将会被隐式地包装在一个 promise 中。

async 函数可能包含 0 个或者多个await表达式。await 表达式会暂停整个 async 函数的执行进程并出让其控制权，只有当其等待的基于 promise 的异步操作被兑现或被拒绝之后才会恢复进程。promise 的解决值会被当作该 await 表达式的返回值。

以上都是定义：简单来说，async函数里有很多await表达式，每当遇到一个await表达式，函数就会暂停运行，直这个await被解决（成功或者失败）。并且await返回的值是成功的值（失败会抛出错误，需要捕捉），之后代码继续运行，这时候可以拿到await返回的值进行下一步操作。

两者是Promise的一个语法糖。

基本思路：

首先，写一个主函数，主函数里需要一个函数用来接收后台参数和给页面赋值（这个函数用await修饰，这样只有拿到数据才能进行下一步）等到await表达式执行完之后，有了结果，说明已经获取数据并且给页面赋值了，之后设置一个定时任务，继续执行主函数，实现循环获取数据。

演示：

代码片段：（最下面有完整的代码）

主函数：

async function getOnline() {
        if (a.flag) {
          console.log("停止循环");
          return;
        }
        let result = await getData();
        if (result.code == 200) {
          setTimeout(() => {
            getOnline();
          }, 2000);
        } else {
          console.log("实时数据刷新失败");
          return;
        }
      }

获取数据并展示页面函数getData():

// 循环获取实时数据
      let getData = () => {
        // resolve() 成功的放回值
        // reject()  失败的放回值
        // 返回的结果必须是new Promise()包装的对象，否则无法获取放回值对象
        return new Promise((resolve, reject) => {
          //获取今日参会人数和当前人数
          this.$http.get("lessons/show/user/num").then(({ data: res }) => {
            if (res.code != 200) {
              console.log("实时数据获取错误");
            } else {
              this.cardLoading2 = false;
              this.CardDate.one = res.meeting;
              this.CardDate.two = res.timeMeeting;
              this.CardDate.three = res.user;
              this.CardDate.four = res.timeUser;
              console.log("实时数据刷新成功");
              resolve(res);
            }
          });
        });
      };

所有代码： 

其中flag是判断是否在这个页面。（如果不在，停止发送请求） 

//(实时-卡片)实时数据循环
    getCycle() {
      let a = this;
      async function getOnline() {
        if (a.flag) {
          console.log("停止循环");
          return;
        }
        let result = await getData();
        if (result.code == 200) {
          setTimeout(() => {
            getOnline();
          }, 2000);
        } else {
          console.log("实时数据刷新失败");
          return;
        }
      }
      // 循环获取实时数据
      let getData = () => {
        // resolve() 成功的放回值
        // reject()  失败的放回值
        // 返回的结果必须是new Promise()包装的对象，否则无法获取放回值对象
        return new Promise((resolve, reject) => {
          //获取今日参会人数和当前人数
          this.$http.get("lessons/show/user/num").then(({ data: res }) => {
            if (res.code != 200) {
              console.log("实时数据获取错误");
            } else {
              this.cardLoading2 = false;
              this.CardDate.one = res.meeting;
              this.CardDate.two = res.timeMeeting;
              this.CardDate.three = res.user;
              this.CardDate.four = res.timeUser;
              console.log("实时数据刷新成功");
              resolve(res);
            }
          });
        });
      };
      //执行循环
      getOnline();
    },

注意事项： 

进入循环时注意要写一个判断条件，如果已经开始循环实时发送请求了，就不要继续进入函数了，避免累加。

//进入循环
      if (!this.cycle) {
        this.cycle = true;
        this.getCycle();
      }