利用Promise和timeout实现Vue定时请求数据

2023-11-30 01:24:00

在Vue项目中，我们需要编写一个定时请求数据的方法，每隔10秒请求一次数据。如果返回的数据小于或等于4，则调用Promise的失败回调函数reject，并输出返回的结果。如果返回的数据大于4且小于11，则调用Promise的成功回调函数resolve，并输出返回的结果。

实现这个功能需要以下步骤：

创建一个Vue组件，并定义一个data()函数，用于存储数据。
在组件的created()生命周期钩子中，使用setTimeout函数创建一个定时器，每隔10秒请求一次数据。
在定时器中，使用Promise函数发出请求，并使用then()方法添加两个回调函数：一个是resolve，一个是reject。
在resolve回调函数中，如果返回的数据大于4且小于11，则输出返回的结果。
在reject回调函数中，如果返回的数据小于或等于4，则输出返回的结果。

以下是详细的代码实现：

<template>
  <div id="app">
    <h1>定时请求数据</h1>
    <p>数据：{{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      setTimeout(() => {
        // 发出请求
        const promise = new Promise((resolve, reject) => {
          // 模拟请求过程
          setTimeout(() => {
            // 模拟返回数据
            const data = Math.random() * 10

            // 根据返回数据的值，调用不同的回调函数
            if (data <= 4) {
              reject(data)
            } else if (data > 4 && data < 11) {
              resolve(data)
            }
          }, 1000)
        })

        // then()方法添加两个回调函数
        promise.then(
          (data) => {
            // resolve回调函数
            this.data = data
          },
          (data) => {
            // reject回调函数
            this.data = data
          }
        )
      }, 10000) // 定时器每隔10秒执行一次
    }
  }
}
</script>