如何从响应发送 url 参数到 express api 调用答案

【问题标题】：How to send url params from react to express api call如何从响应发送 url 参数到 express api 调用
【发布时间】：2021-09-14 22:11:39
【问题描述】：

所以我正在从 react 到 express 发出一个获取请求，并且 api url 需要参数，但我希望 url 的最后一位是动态的。我如何将参数从反应中发送到快递中的 api url？这是代码

反应

const [dynamic, setDynamic] = useState("somevalue")

  useEffect(() => {
    async function fetchData() { 
        const response = await fetch("/web")
        const data = await response.json()
        console.log(data)
    }
    fetchData()
  }, [dynamic])

express.js

app.get("/web", async (req, res) => {
    const response = await fetch("https://alexa.com/api?Action=urlInfo&Url=")
      const data = await response.json()
      res.json(data)
})

基本上，我希望将 dynamic 状态值注入到 express 中 URL 的末尾。

类似

反应

const [dynamic, setDynamic] = useState("somevalue")

    async function fetchData() { 
        const response = await fetch("/web" + dynamic)
        const data = await response.json()
        console.log(data)
      }

然后在express调用API时URL变为

const response = await fetch("https://alexa.com/api?Action=urlInfo&Url=somevalue")

我该如何实现这一目标？

【问题讨论】：

您可以使用查询参数（如'/web/foo?key1=value1&key2=value2'），也可以使用url参数（如'/web/foo/:param1/:param2'。对于url参数，express会为您匹配您的请求url到适当的处理程序并将url参数提取为request.params对象中的变量。在查询参数的情况下，无论匹配什么处理程序，它们最终都在url中，它们最终在request.query对象中。您可以以此为起点，进一步了解这些方法中的哪些方法对您的用例有意义。

标签： javascript reactjs express

【解决方案1】：

您在路由处理程序端定义参数，设置与所需模式匹配的路由。例如：

app.get("/foo/bar/:myparam", async (req, res) => {
    //... here's your handler code
})

将匹配处理程序内的/foo/bar/baz 和req.params.myparam === "baz"。

http://expressjs.com/en/guide/routing.html#route-parameters

使用查询参数是类似的，但你想检查req.query对象instead的值，比如：

// client side (React code)
await fetch("/foo/bar?myparam=baz")
...
// In your express handler:
req.query.myparam === "baz"

【讨论】：

【解决方案2】：

在 api 调用的参数中使用动态值。

React 代码如下所示：

const [dynamic, setDynamic] = useState("somevalue")

useEffect(() => {
async function fetchData() { 
    const response = await fetch(`/web/${dynamic}`)
    const data = await response.json()
    console.log(data)
}
fetchData()
}, [dynamic])

在 Express.Js 代码中在路由处理程序端定义参数，并在 fetch api 调用中使用它

app.get("/web/:value", async (req, res) => {
    const {value} = req.params;  
    const response = await fetch(`https://alexa.com/api?Action=urlInfo&Url=${value}`)
      const data = response.json()
      res.json(data)
})

【讨论】：