React.js中如何向API GET请求传递参数？

当然可以！你有两种常用的方式来给GET请求传递参数，下面分别给你详细讲怎么实现：

方式一：使用查询参数（Query Parameters） #

这种方式是把参数放在URL的?后面，比如/api/get/beerWithComments?name=xxx，适合传递可选参数或者多个参数的场景。

前端Action修改 #

修改你的action方法，接收参数并通过axios的params选项传递：

export const fetchBeerWithComments = (beerName) => async dispatch => {
  const res = await axios.get('/api/get/beerWithComments', {
    params: { name: beerName } // 将参数作为查询参数传递
  });
  dispatch({ type: FETCH_BEER_WITH_COMMENTS, payload: res.data });
};

调用这个action时，直接传入你需要的名称即可，比如fetchBeerWithComments("IPA")。

后端路由修改 #

在后端通过req.query获取查询参数，替换掉硬编码的内容：

app.get('/api/get/beerWithComments', (req,res,next) =>{
  const targetName = req.query.name; // 获取前端传递的name参数
  Beer.findOne({name: targetName})
    .populate('comments')
    .exec((err,beer) =>{
      if(err) return next(err);
      res.json(beer);
    });
});

方式二：使用URL路径参数（Path Parameters） #

这种方式是把参数直接嵌入URL路径中，比如/api/get/beerWithComments/xxx，更符合RESTful风格，适合标识唯一资源的场景。

前端Action修改 #

使用模板字符串把参数拼接到URL路径里：

export const fetchBeerWithComments = (beerName) => async dispatch => {
  const res= await axios.get(`/api/get/beerWithComments/${beerName}`);
  dispatch({type: FETCH_BEER_WITH_COMMENTS, payload : res.data });
};

后端路由修改 #

修改路由路径，用:name定义参数占位符，然后通过req.params获取参数：

app.get('/api/get/beerWithComments/:name', (req,res,next) =>{
  const targetName = req.params.name; // 获取路径中的name参数
  Beer.findOne({name: targetName})
    .populate('comments')
    .exec((err,beer) =>{
      if(err) return next(err);
      res.json(beer);
    });
});

额外注意事项 #

• 建议在后端对传入的targetName做基本校验（比如判断是否为空字符串），避免执行无效的数据库查询
• 如果参数包含特殊字符（比如空格、中文），查询参数方式下axios会自动帮你编码；路径参数方式下，你可以用encodeURIComponent(beerName)先编码再拼接，避免URL解析错误

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