react.js中如何将参数传递给API获取请求答案

【问题标题】：How to pass parameter to an API get request in react.jsreact.js中如何将参数传递给API获取请求
【发布时间】：2018-11-06 04:37:17
【问题描述】：

我想知道有没有办法将参数从客户端传递到后端 API 获取请求。此时我硬编码了所需的参数（名称：“newName”）。

后端路由：

app.get('/api/get/beerWithComments', (req,res,next) =>{



    Beer.findOne({name:'newName'}) //I want to pass the correct name, now it's hard coded.
        .populate('comments').exec((err,beer) =>{
            if(err) return next(err);
            res.json(beer);
        });

});

我的操作方法：

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

}

我想在这里传入参数。但是我不知道我是否可以将参数传递给我的后端。

export const fetchBeerWithComments =(parameter) => async dispatch => {...

【问题讨论】：

标签： node.js reactjs express mongoose

【解决方案1】：

您可以在查询字符串中传递参数name，并在处理程序中使用req.query 读取参数值

app.get('/api/get/beerWithComments', (req, res, next) =>{
  var qname = req.query.name || "";
  if(!qname.length) {
    res.status(404).json({"msg": 'Invalid name in query string'});
    res.end();
    return;
  }
  Beer.findOne({name: qname}) //I want to pass the correct name, now it's hard coded.
    .populate('comments').exec((err,beer) =>{
        if(err) return next(err);
        res.json(beer);
    });
});

从客户端调用 GET API 时，只需添加查询字符串参数name 和相应的值，它应该可以按预期工作。例如，URL 就像

export const fetchBeerWithComments =(parameter) => async dispatch => {
  const res= await axios.get('/api/get/beerWithComments?name=' + parameter);
  dispatch({type: FETCH_BEER_WITH_COMMENTS, payload : res.data });
}

【讨论】：

你能解释一下这行代码吗：` var qname = (req.query || {}).name || "";` ?谢谢！
在js中当一个对象为null/undefined/false或者""时，引用里面的key会抛出异常。通过使用短路或运算符，您可以将这些值更改为已知值。通过使用 var qname = (req.query || {}).name || "";在 express 中，req.query 将始终是一个对象，无论客户端是否发送它。因此我们可以稍微修改一下我们的代码。当客户端不使用 .length 发送名称参数时，它将引发异常，因此在这种情况下，代码会将其短路为空字符串的已知值，并且长度属性将起作用并防止运行时异常。

【解决方案2】：

如果您需要将其传回，您只需将 api 端点更改为具有动态参数，例如将 get 端点更改为：

/api/get/beerWithComments/:beerName

所以你可以在前端拥有

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

然后在后端

app.get('/api/get/beerWithComments/:beerName', (req,res,next) =>{
    Beer.findOne({name: req.params.beerName})
        .populate('comments').exec((err,beer) => {
            if(err) return next(err);
            res.json(beer);
     });
});

【讨论】：