Async函数始终返回相同数据：点赞后产品数据未更新排查

你的问题核心是接口请求被缓存了，导致点赞后即时调用getProductById返回的是缓存的旧数据，只有等缓存过期后才能拿到更新后的新数据。以下是具体排查和解决方法：

1. 处理HTTP客户端/浏览器缓存 #

浏览器或CDN可能对getProductById的GET请求做了缓存优化，直接返回本地缓存内容而不向服务器发起新请求。解决办法是：

• 在请求参数中添加唯一标识（比如时间戳），强制浏览器每次都发送新请求：

const getProductById = async ({ productId }: { productId: string }) => {
    // 给请求加时间戳参数，避免读取缓存
    const response = await productsService.getProductById({ 
      id: productId,
      _t: Date.now() 
    })
    if (response.isOk && response.data) {
      setProduct(response.data)
      console.log('response product: ', response.data)
    }
}

• 或者让后端在getProductById接口的响应头中设置缓存控制：
  Cache-Control: no-cache, no-store, must-revalidate，彻底禁用该接口的缓存。

2. 检查服务端缓存 #

如果后端用了Redis、内存缓存等机制缓存产品数据，点赞操作更新数据库后，缓存没有同步更新就会导致接口返回旧数据。需要：

• 在setLikeStatus接口执行成功后，主动删除对应产品ID的缓存，或者直接更新缓存中的is_liked字段；
• 确保缓存的过期时间设置合理，避免缓存长时间不更新。

3. 完善异步流程（辅助验证） #

虽然你已经用await调用点赞接口，但可以补充错误捕获和请求确认，避免因接口异常导致后续逻辑失效：

const onLike = async () => {
  try {
    const likeRes = await productsService.setLikeStatus({
      isLiked: true,
      itemId: product.items_id,
    })
    // 确认点赞接口执行成功后，再调用获取产品数据接口
    if (likeRes.isOk) {
      await getProductById({ productId })
    }
  } catch (error) {
    console.error('点赞操作失败:', error)
  }
}

内容的提问来源于stack exchange，提问作者Armin Dervić