如何在URL中使用路由参数执行axios的get请求？

Question

所以，我有一个 action creator，在其中我想要从我的 API 端点获取数据。

以下代码可以正常工作：

export function getData(){
    return function(dispatch){
        axios.get('/api/form/myuser/mytitle').then( (res) => {
            console.log(res.data);
            return dispatch(retrieve(res.data))
        })
        .catch( (err) => {
            console.log(err)
        })
    }
}

然而，在我的情况下，API端点会发生变化。 我首先向此URL发出服务器请求：/api/form/:userId/:title 然后，在客户端侧，我要使用以下axios获取请求执行上述操作创建者：

axios.get('/api/form/:userId/:title')

在这里使用控制台日志显然不会返回标题字符串，它会返回:title。我是否能够实现我想做的事情？如果不能，有什么其他建议吗？

- John Doe

---

所以您希望字符串能够动态格式化，因为每个请求的URL都不相同？ - therewillbecode

Answer 1

我认为模板字符串可以是您问题的舒适解决方案。请不要犹豫使用Alt Gr + 7！ :)

axios.get(`/api/form/${userId}/${title}`)

注意未定义的值。

https://developer.mozilla.org/hu/docs/Web/JavaScript/Reference/Template_literals

- Ferenc Pomeisl

Answer 2

好的，我找到了答案 :)

解决方案在react-router中。在此之前，我对react-router不够熟悉。

诀窍是在路由路径中定义参数，无论它在哪里（您的存储库或定义所有路由的文件中），如下所示：

<Route path = "form/:userId/:formtitle" component = {Form} />

然后，您可以通过props在Form组件中访问这些参数，如下所示：

this.props.params.userId 
this.props.params.formtitle

为了使上述属性在您的操作创建者中可用，您可以将它们作为操作创建者的参数在组件中触发，如下所示：

this.props.getData (this.props.params.userId, this.props.params.formtitle)

更多细节请参考：https://github.com/reactjs/react-router-tutorial/tree/master/lessons/08-index-routes

。

- John Doe

---

这不是您所问的问题的答案，您所问的是“如何在URL中使用路由参数执行axios获取请求？” - mikemaccana