watch-代码片段

1.代码

记录下一段代码

<script setup>
import { ref, watch } from 'vue'

const id = ref(1)
let currentRequestId = 0

// 模拟异步请求
function fetchData(requestId, newId) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ id: newId, data: `Data for ID ${newId}` })
    }, 1000) // 模拟 1 秒的网络延迟
  })
}

watch(id, async (newId, oldId) => {
  console.log(`ID changed from ${oldId} to ${newId}`)
  
  const requestId = ++currentRequestId
  
  try {
    const result = await fetchData(requestId, newId)
    
    // 检查这个请求是否仍然是最新的
    if (requestId === currentRequestId) {
      console.log('Request completed with latest ID:', result)
    } else {
      console.log('Request completed, but ID has changed. Discarding result.')
    }
  } catch (error) {
    console.error('Error fetching data:', error)
  }
})

// 模拟 ID 变化
setTimeout(() => { id.value = 2 }, 500)
setTimeout(() => { id.value = 3 }, 1500)
</script>

<template>
  <div>
    <p>Current ID: {{ id }}</p>
  </div>
</template>

这段代码记录下，

1. 初始化阶段:

   const id = ref(1)
   let currentRequestId = 0
   

   • id 被初始化为响应式引用,值为1。
   • currentRequestId 初始化为0。

2. 设置 watch 函数:

   watch(id, async (newId, oldId) => { ... })
   

   • Vue设置了一个观察器,监听 id 的变化。
   • 此时,watch函数还未执行,只是被定义和注册。

3. 设置定时器:

   setTimeout(() => { id.value = 2 }, 500)
   setTimeout(() => { id.value = 3 }, 1500)
   

   • 两个定时器被添加到事件队列中。

4. 主线程执行完毕,进入事件循环。

5. 500ms后:

   • 第一个定时器触发。
   • id.value 被设置为2。
   • 这触发了 watch 函数。

6. Watch 函数第一次执行:

   • currentRequestId 增加到1。
   • fetchData(1, 2) 被调用,返回一个Promise。
   • 这个Promise被添加到微任务队列。

7. 1000ms后(自步骤5开始):

   • fetchData 的定时器触发。
   • Promise 解析,结果添加到微任务队列。

8. 1500ms后(自开始):

   • 第二个定时器触发。
   • id.value 被设置为3。
   • 这再次触发了 watch 函数。

9. Watch 函数第二次执行:

   • currentRequestId 增加到2。
   • fetchData(2, 3) 被调用,返回另一个Promise。

10. 微任务队列处理:

    • 第一个 fetchData 的结果被处理。
    • 但是 requestId (1) !== currentRequestId (2),所以结果被丢弃。

11. 2500ms后(自开始):

    • 第二个 fetchData 的定时器触发。
    • Promise 解析,结果添加到微任务队列。

12. 微任务队列再次处理:

    • 第二个 fetchData 的结果被处理。
    • 这次 requestId (2) === currentRequestId (2),所以结果被接受。

这个过程展示了JavaScript的异步特性和事件循环机制。通过使用 currentRequestId,我们能够跟踪最新的请求,并确保只处理最新ID对应的数据,即使在多个异步操作并发执行的情况下也能正确工作。

原文地址：https://blog.csdn.net/qq_45030898/article/details/142821880

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！