javascript 如何在Nuxt 3中使用onMounted执行异步操作

whhtz7ly 于 2023-06-20 发布在 Java

关注(0)|答案(1)|浏览(479)

我不知道这有什么问题，repository ref的值就是没有更新
我写了async/await，但似乎不起作用。repository是一个空数组。

我可以使用onMounted的API，所以我认为它有问题。我不太懂。

下面是我的代码：

<template>
  <div>
    <h1>Starred Repositories</h1>
    <ul>
      <li v-for="repository in repositories" :key="repository.id">
        <h3>{{ repository.name }}</h3>
        <p>{{ repository.description }}</p>
      </li>
    </ul>
    <button @click="nextPage" :disabled="isLastPage">Next Page</button>
  </div>
</template>

<script setup>
import { Octokit } from '@octokit/core';

const repositories = ref([]);
const page = ref("1")
const runtimeConfig = useRuntimeConfig();

const octokit = new Octokit({
  auth: runtimeConfig.githubToken,
});

const nextPage = () => {
  page.value++;
}

onMounted(async () => {
  const response = await octokit.request('GET /user/starred?page=' + page.value, {
    headers: {
      'X-GitHub-Api-Version': '2022-11-28',
    },
  });
  repositories.value = response.data;
})

console.log(repositories.value);
</script>

这是我的app.vue：

<script>
import Star from './components/Star.vue'

export default {
  components: {
    Star,
    }
}
</script>

<template>
  <Star />
</template>

JavaScript

来源：https://stackoverflow.com/questions/76500716/how-to-use-onmounted-to-do-async-things-in-nuxt-3

1条答案

按热度按时间

wz3gfoph1#

控制台日志将执行并记录一个空数组，因为它将在onMounted中的代码之前执行，它是一个钩子，钩子本身不支持异步。
移动console.log，使其位于onMounted钩子内部，并确保端点实际上返回的不是空数组本身。
另外，使用生命周期钩子来触发API调用并不是最好的方法，而是使用顶层等待并观察策略。
https://nuxt.com/docs/getting-started/data-fetching#watch
在您的情况下，您没有使用Nuxt的获取帮助程序...所以手动装配看起来像这样：

<script setup>

import { Octokit } from '@octokit/core';

const repositories = ref([]);
const page = ref(1)
const runtimeConfig = useRuntimeConfig();

const octokit = new Octokit({
  auth: runtimeConfig.githubToken,
});

const nextPage = () => {
  page.value++;
}

const fetchStarredUsers = async (page) => {
  const response = await octokit.request(`GET /user/starred?page=${page}`, {
    headers: {
      'X-GitHub-Api-Version': '2022-11-28',
    },
  });

  if(Array.isArray(response?.data)) {
    repositories.value = response.data
    return
  }
  
  console.error('Invalid response, expected array of users').
}

// Call on entering component, (triggers loading suspense)
// https://nuxt.com/docs/getting-started/data-fetching#suspense
await fetchStarredUsers(page.value)

// Call on page being changed
watch(page, fetchStarredUsers)

</script>

赞(0）回复(0）举报 2023-06-20

我来回答

javascript 如何在Nuxt 3中使用onMounted执行异步操作

1条答案

相关问题

热门标签

最新问答