next.js 那么,为什么在服务器组件中调用的这个fetch函数没有在路由处理程序文件中调用fetch GET函数呢

lf5gs5x2  于 12个月前  发布在  其他
关注(0)|答案(1)|浏览(101)

所以,我只是在练习Next.js 13.4新的实验性应用程序功能与React服务器组件。长话短说,我有一个程序,它chnages一个markdown文件的博客文章,我这样做的节点js和灰色物质的阅读文件。

import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'

const postsdir = path.join(process.cwd(),'src','data','Posts')

async function getPostData(filename) {
    const filePath = path.join(postsdir, filename)
    const postInfo = fs.readFileSync(filePath, 'utf-8')
    const postSlugName = filename.replace(/\.md$/,'')
    const { data, content } = matter(postInfo)
    const PostData = {
        slug: postSlugName,
        data: data, 
        content:content
    }
    return PostData
}

export async function getAllPosts() {
    const Posts = fs.readdirSync(postsdir)
    const AllPostsData = await Promise.all(Posts.map(async (post) => {
        return await getPostData(post)
    }))
    return AllPostsData.sort((postA, postB) => postA.date > postB.date ? -1 : 1)
}

export async function getFeaturedPosts(){
    const allPosts = await getAllPosts()
    const featuredPosts = allPosts.filter(post => post.data.isFeatured === true)
    return featuredPosts
}

我知道nde js不能在客户端使用,所以要调用函数来获取帖子,我需要一个服务器组件,这就是js 13.4的下一个新功能。所以我有一个API路由处理程序来获取包含在markdown文件头中的布尔值(isFeatured)..

import { getFeaturedPosts } from "@/lib/PostsGateway";
import { NextResponse } from "next/server";

export async function GET() {
    console.log('get method run')
    const featuredPosts = await getFeaturedPosts()
    console.log(featuredPosts)
    return NextResponse.json(featuredPosts)
}

这只是一个简单的API路由处理程序,用于从fetch.它位于src/app/API/featuredPosts中。则调用get函数的方式是通过进行默认的获取请求,该获取请求是get请求。

import Hero from "@/components/Home/Hero"
import FeaturedPosts from "@/components/Home/featuredPosts";
import { getFeaturedPosts } from "@/lib/PostsGateway";

async function getData() {
  "use server"
  const fPosts = await fetch('http://localhost/api/featuredPosts')
  return fPosts
}

export default async function HomePage() {
  const featuredPosts = await getData()
  console.log(featuredPosts)
  return (
    <>
      <Hero />
      <FeaturedPosts posts={featuredPosts} />
    </>
  )
}

我想获取markdown文件信息,它是通过getData()函数中的fetch函数获取的,getData()函数是一个服务器组件,使用fetch default函数,它应该调用API/festuredPosts route.js > GET()函数中的get函数,但我没有调用,错误说:无法获取,我不知道,我在前几天使用过它,但这是与客户端组件现在,这是一个小博客的做法,没有必要使它成为一个客户端,我使用的节点js不能在客户端运行。
我试图得到一个标记文件中的一个对象与蛞蝓,数据和内容,这是由从灰色物质的问题,但错误弹出与feiled获取,当我使用获取(“/API/featuredPosts”),然后它说,它不能解析的URL从“API/featuredPosts”,但我认为的方式来调用API路由处理程序是这样的,但在应用程序中,我写了“http:localhost/API/featuredPosts”冰艾说,但再次没有.. plz看看是否有一些worng与我的代码和给予建议,谢谢

ifmq2ha2

ifmq2ha21#

由于您已经在服务器组件上,并且不需要调用API,因此可以直接在HomePage组件中执行const featuredPosts = await getFeaturedPosts(),如下所示:

export default async function HomePage() {
  const featuredPosts = await getFeaturedPosts()
  return (
    <>
      <Hero />
      <FeaturedPosts posts={featuredPosts} />
    </>
  )
}

相关问题