NUXT3 USEFETCH仅发送请求一次

发布于 2025-01-30 19:00:32 字数 992 浏览 0 评论 0原文

<script setup lang="ts">

const loadPost = () => {
  console.log('load')
  const { data, pending, error, refresh } = useFetch(
    'https://jsonplaceholder.typicode.com/posts',
    {
      method: 'POST',
      body: {
        title: 'foo',
        body: 'bar',
        userId: 1,
      },
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    })
  console.log(data)
}
</script>

<template>
  <div class="max-w-xs space-y-4 mx-auto mt-4">
      <button @click.prevent="loadPost">Load post</button>
  </div>
</template>

“在此处输入图像说明”

单击“加载”按钮后，我每次通过控制台日志处理请求时，但是我在网络Chrome DevTools中没有看到新请求，我需要每次收到服务器的响应时间，我该怎么做？

注意：如果我使用常规fetch（），则每次发送请求，因为它应该是

我的NUXT版本-3.0.0-rc.1

原文

<script setup lang="ts">

const loadPost = () => {
  console.log('load')
  const { data, pending, error, refresh } = useFetch(
    'https://jsonplaceholder.typicode.com/posts',
    {
      method: 'POST',
      body: {
        title: 'foo',
        body: 'bar',
        userId: 1,
      },
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    })
  console.log(data)
}
</script>

<template>
  <div class="max-w-xs space-y-4 mx-auto mt-4">
      <button @click.prevent="loadPost">Load post</button>
  </div>
</template>

enter image description here

After clicking on the load button, I see every time the request is processed through the console log, but I do not see a new request in the network chrome devtools, I need to receive a response from the server every time, how can I do this?

Note: If I use a regular fetch(), then the request is sent every time, as it should be

my nuxt version - 3.0.0-rc.1

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

雨轻弹 2025-02-06 19:00:32

谢谢！通过添加param initialcache：false来解决

useFetch('https://reqres.in/api/users?page=2?delay=1', { initialCache: false })

Thanks! Solved by adding param initialCache: false

useFetch('https://reqres.in/api/users?page=2?delay=1', { initialCache: false })

回复收藏 0 原文

日久见人心 2025-02-06 19:00:32

如果要重新获取数据，请使用 refresh返回

<script setup lang="ts">
const { data, pending, error, refresh } = await useFetch('https://reqres.in/api/users?page=2?delay=1')

const loadPost = () => {
  refresh()
}
</script>

（）方法从usefetch（） =组件％2fmycomponent.vue“ rel =“ nofollow noreferrer”> demo

If you want to re-fetch the data, use the refresh() method returned from useFetch():

<script setup lang="ts">
const { data, pending, error, refresh } = await useFetch('https://reqres.in/api/users?page=2?delay=1')

const loadPost = () => {
  refresh()
}
</script>

demo

回复收藏 0 原文

楠木可依 2025-02-06 19:00:32

当心！您需要一个钥匙。在您中不提供一个，将从URL产生它。这可能不会为您带来期望的结果。如果数据将更改，则会生成其他密钥。

这是在 docs

options（来自useasyncdata）：
键：一个独特的键，以确保可以在请求中正确删除数据获取，如果不提供，它将根据URL和获取选项生成。

回复收藏 0 原文

何时共饮酒 2025-02-06 19:00:32

刷新/执行：可用于刷新处理程序函数返回的数据的函数。
默认情况下，NUXT等待刷新完成，然后才能再次执行。

const loadPost = async () => {
  console.log('load')
  const { data, pending, error, refresh } = await useFetch(
    'https://jsonplaceholder.typicode.com/posts',
    {
      method: 'POST',
      body: {
        title: 'foo',
        body: 'bar',
        userId: 1,
      },
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    })
  refresh();
  console.log(data)
}

refresh/execute: a function that can be used to refresh the data returned by the handler function.
By default, Nuxt waits until a refresh is finished before it can be executed again.

const loadPost = async () => {
  console.log('load')
  const { data, pending, error, refresh } = await useFetch(
    'https://jsonplaceholder.typicode.com/posts',
    {
      method: 'POST',
      body: {
        title: 'foo',
        body: 'bar',
        userId: 1,
      },
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    })
  refresh();
  console.log(data)
}

回复收藏 0 原文

~没有更多了~