从多个数据源构建 Nuxt 站点地图

Question

我正在以 SSR 模式使用 Nuxt，并希望为多个路线/数据集构建动态站点地图。

我现在面临的问题是 async/await 函数只允许“数据”作为变量。将'post'作为变量的相同函数导致“地图函数不存在”

这就是我的 Nuxt.config.js 文件中的内容

  sitemap: {
    hostname: "https://example.com",
    routes: async () => {
      let { data } = await axios.get('https://api.example.com/api/v1/locations');
      data = data.data.map((loc) => `/locations/${loc.slug}`);
      console.log(data);

      let { posts } = await axios.get('https://cms.example.com/wp-json/wp/v2/posts');
      posts = posts.map((post) => `/posts/${post.slug}`);
      console.log(posts);

      data.concat(posts);

      return data
    },
    path: '/sitemap.xml'
  }

我正在寻找的结果输出应该是这样的：

[
  '/locations/location-one',
  '/locations/location-two',
  '/locations/location-three',
  '/posts/post-one',
  '/posts/post-two',
  '/posts/post-three',
]

我得到的错误：

Cannot read property 'map' of undefined

它发生在这一行：

posts = posts.map((post) => `/posts/${post.slug}`)

所以在我看来，它不接受 'posts' 作为它自己的 await 函数的有效变量。

当第一个调用被注释掉并且使用“数据”而不是“帖子”时，该调用工作正常

Answer 1

你的数组连接必须是这样的：

data.concat(posts);

（见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat）

---

push() 方法只是推送一个项目，而不是一个项目数组。

（见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push）

Answer 2

你的解构反应是错误的：

替换：

let { posts } = ...

作者：

let { data: posts } = ...

因为 Axios 总是返回一个“数据”属性，所以你只需要将它重命名为“帖子”。