为什么这条 catch all API 路线不起作用？

Question

所以我最近一直在学习 NextJS API 路由和 NodeJS，虽然我现在知道如何创建动态路由，但我在一些事情上遇到了一些问题 -

这是我的 api/matches.js 文件。

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction

export default async function handler(req, res) {
  const response = await fetch(`https://exampleapi.com/?&token=# `)
  const jsonData = await response.json();
  res.status(200).json(jsonData);

}

现在，我有另一个用于此 API 的动态路由，它通过匹配 slug 获取匹配，所以这个文件被称为 /api/matches/[...matchslug].js

export default async function handler(req, res) {
const  page  = req.query.matchslug
const response = await fetch(`https://examleapi.com/?search[slug]=${page}&token=# `)
const jsonData = await response.json();

虽然这个动态路由获取一个结果，所以如果我去 matches/exampelmatch，我确实得到了 examplematch 的结果，但是我希望以某种方式实现它

matches/examplematch1/examplematch2

Returns 数据来自 examplematch1 & examplematch2.

我不确定是否可以构建类似的东西，但非常感兴趣。

感谢您的时间和耐心等待。

Answer 1

在您的 /api/matches/[...matchslug].js 示例中，matchslug 的值将始终是一个数组。

您可以映射 matchslug 数组中的值并使用 Promise.all 请求每个资源，而不是直接将 page 变量传递给 fetch。

看起来像这样（我还没有测试过）：

export default async function handler(req, res) {
  const promiseArray = req.query.matchslug.map(async (slug) => {
    const response = await fetch(`https://examleapi.com/?search[slug]=${slug}&token=# `)
    const jsonData = await response.json();
    return jsonData
  })
  const result = await Promise.all(promiseArray)
  res.status(200).json(result);
}

为什么这条 catch all API 路线不起作用？

Why is this catch all API route not working?

javascript

next.js