【Vue】结合Promise及timeout做一个定时请求数据的方法

需求：做一个方法，每10秒拿一次数据；当数据小于等于4时，调用promise失败时的回调函数reject并输出返回结果；当数据大于4小于11时，调用promise成功时的回调函数resolve并输出返回结果，同时判断当数据大于10时，停止并清除定时器。

代码如下:

data() {
    return {
      timer: null,//定时器
      num: 1,//默认从1开始计数
    }
}

 created() {
    this.promiseTest(this.num)
  },

  methods: {
    promiseTest(num) {
      new Promise((resolve, reject) => {
        this.timer = setTimeout(() => {
        /**
         * 此处只做网络请求，不对请求得到的数据进行处理
         * resolve表示请求成功后的回调，其传的参数将作为then函数中成功函数的实参
         * reject表示请求失败后的回调，其传的参数将作为then函数中失败函数的实参
         */
          if (num > 4) {
            resolve('第' + num + '次网络请求，输出大于4小于11的数：' + num)
          } else {
            reject('第' + num + '次网络请求，输出小于等于4的数：' + num)
          }
        }, 10000)
      }).then((data) => {
        console.log(data)
        this.num++
        if (this.num > 10) {
          console.log('停止并清除定时器！')
          clearTimeout(this.timer)
        } else {
          this.promiseTest(this.num)
        }
      }, (err) => {
        console.log(err)
        this.num++
        this.promiseTest(this.num)
      })
    },
}
复制代码

输出结果如图：