在Sapper中从WordPress API获取数据的问题求助

嘿，我来帮你理清这个问题！你遇到的几个错误其实都是因为对Sapper的服务端模块和数据获取逻辑理解有点偏差，咱们一步步拆解解决：

1. 先搞懂Sapper里的文件角色 #

你修改的/blog/_posts.js是服务器端运行的模块，不是组件文件，所以它不能用组件里的preload方法，也没有浏览器自带的fetch API——这就是你一开始碰到fetch is not defined的原因。

2. 正确的实现步骤 #

第一步：安装node-fetch #

因为服务端没有fetch，先装上node-fetch：

npm install node-fetch

第二步：重写_posts.js #

原来的文件是直接导出硬编码的数组，现在我们要改成异步获取并返回处理后的数组。注意Sapper支持异步模块导出，所以我们可以写一个异步函数来获取数据：

import fetch from 'node-fetch';

async function fetchWordPressPosts() {
  // 先请求API
  const response = await fetch('http://localhost:9000/wp-json/wp/v2/posts');
  
  // 检查请求是否成功
  if (!response.ok) {
    throw new Error(`请求失败：${response.status}`);
  }
  
  // 把响应转成JSON数组
  const wpPosts = await response.json();
  
  // 把WordPress返回的结构转换成模板需要的格式（和原硬编码的posts结构对齐）
  return wpPosts.map(post => ({
    title: post.title.rendered,
    slug: post.slug,
    html: post.content.rendered,
    date: post.date
  }));
}

// 导出异步结果，Sapper会自动等待它解析完成
export default fetchWordPressPosts();

第三步：调整页面组件的使用 #

原来的页面组件是直接导入posts数组，但现在我们导出的是一个Promise，所以需要在组件的preload里等待它解析：

比如在/blog/index.svelte里：

<script context="module">
  // 导入Promise
  import postsPromise from './_posts.js';

  export async function preload() {
    // 等待Promise解析成数组
    const posts = await postsPromise;
    return { posts };
  }
</script>

<!-- 剩下的模板代码不用改，因为preload返回的posts是正常数组，可以直接map -->

同样，/blog/[slug].svelte也要调整：

<script context="module">
  import postsPromise from './_posts.js';

  export async function preload(page) {
    const posts = await postsPromise;
    const post = posts.find(post => post.slug === page.params.slug);

    if (!post) this.error(404, '文章不存在');

    return { post };
  }
</script>

3. 你之前的错误原因复盘 #

• "fetch is not defined"：服务端环境没有浏览器的fetch，必须用node-fetch并导入。
• "posts.map is not a function"：你直接把fetch返回的Promise赋值给了posts，Promise不是数组，自然没有map方法。
• "Cannot read property 'map' of undefined"：你尝试导出的posts变量在模块加载时是undefined，因为preload是组件层面的逻辑，模块导出的内容会先被读取，导致后续代码调用map失败。

学习Sapper的小建议 #

• 先啃官方文档里的数据获取部分，重点搞清楚服务端模块、preload方法、前后端数据流动的区别，这是Sapper的核心。
• 从官方模板的最小改动开始测试：比如先在_posts.js里打印获取到的数据，确认是数组后再做格式转换，不要一下子全换掉。
• 利用Sapper的开发模式，它的错误提示很详细，会告诉你哪行代码出了问题，跟着提示排查效率很高。

内容的提问来源于stack exchange，提问作者Andy Kleeman