实现原生js，vue2,vue3，react18类组件，react函数式组件在定时器中调用接口_vue3定时调用接口

在原生 JavaScript 中，可以使用 setInterval 和 setTimeout 函数来调用接口。下面是一个示例代码

// 定义变量存储定时器
let timer
 
// 调用接口函数
function fetchData() {
  // 执行接口请求代码
}
 
// 在页面加载时启动定时器
window.onload = function() {
  timer = setInterval(fetchData, 3000)
}
 
// 在页面卸载时清除定时器
window.onunload = function() {
  clearInterval(timer)
}

在 Vue2 中，我们可以在组件的生命周期钩子中绑定和解绑定时器。下面是一个示例代码：

export default {
  data() {
    return {
      data: []
    }
  },
  created() {
    // 在组件创建时启动定时器
    this.timer = setInterval(() => {
      this.fetchData()
    }, 3000)
  },
  beforeDestroy() {
    // 在组件销毁前清除定时器
    clearInterval(this.timer)
  },
  methods: {
    async fetchData() {
      // 执行接口请求代码
      const res = await axios.get('/api/data')
      this.data = res.data
    }
  }
}

在 Vue3 中，我们可以使用 onMounted 和 onUnmounted 钩子来绑定和解绑定时器。下面是一个示例代码：

import { onMounted, onUnmounted } from 'vue'
 
export default {
  data() {
    return {
      data: []
    }
  },
  setup() {
    let timer = null
    onMounted(() => {
      // 在组件创建时启动定时器
      timer = setInterval(() => {
        this.fetchData()
      }, 3000)
    })
    onUnmounted(() => {
      // 在组件销毁前清除定时器
      clearInterval(timer)
    })
    async function fetchData() {
      // 执行接口请求代码
      const res = await axios.get('/api/data')
      this.data = res.data
    }
    return {
        fetchData
    }
  }
}

在 React 中，我们可以使用 useEffect 钩子来绑定和解绑定时器。下面是一个示例代码：

import { useEffect, useState } from 'react'
 
export default function MyComponent() {
  const [data, setData] = useState([])
  useEffect(() => {
    let timer = setInterval(() => {
      fetchData()
    }, 3000)
    return () => {
      clearInterval(timer)
    }
  }, [])
 
  async function fetchData() {
    // 执行接口请求代码
    const res = await axios.get('/api/data')
    setData(res.data)
  }
 
  return <div>{data}</div>
}

在 React 中，我们也可以使用函数式组件来调用接口，并使用 useEffect 钩子来绑定和解绑定时器。下面是一个示例代码：

import { useEffect, useState } from 'react'
 
export default function MyFunctionalComponent() {
  const [data, setData] = useState([])
  useEffect(() => {
    let timer = setInterval(() => {
      fetchData()
    }, 3000)
    return () => {
      clearInterval(timer)
    }
  }, [])
 
  async function fetchData() {
    // 执行接口请求代码
    const res = await axios.get('/api/data')
    setData(res.data)
  }
 
  return <div>{data}</div>
}

注意：在定时器内部的函数中，请确保不要直接使用组件中的状态变量，因为组件状态变量可能已经被卸载。