如何通过Axios GET请求传递大于逻辑查询有库存的可用商品

核心问题说明 #

你原先的写法不生效是因为GET请求的Query参数本身没有逻辑判断的语义，countInStock>0会被浏览器编码为countInStock%3E0作为参数名传递，后端不会自动识别为大于判断逻辑。你不需要新增冗余字段，只要前后端约定查询规则即可实现需求。

第一步：前端Axios请求改造 #

不要手动拼接Query字符串，使用Axios内置的params配置项自动序列化参数，更规范也避免编码错误，有两种常用的约定方式：

方式1：约定最小库存参数 #

export const listProductAvailable = () => async (dispatch) => {
  dispatch({
    type: PRODUCT_AVAILABLE_LIST_REQUEST,
  });
  try {
    const { data } = await Axios.get(`/api/products`, {
      params: {
        minStock: 0
      }
    });
    dispatch({ type: PRODUCT_AVAILABLE_LIST_SUCCESS, payload: data });
  } catch (error) {
    dispatch({ type: PRODUCT_AVAILABLE_LIST_FAIL, payload: error.message });
  }
};

方式2：约定运算符后缀参数 #

如果后续有更多大小判断需求，可以直接约定参数格式为字段名[运算符]：

// 前端请求部分
const { data } = await Axios.get(`/api/products`, {
  params: {
    'countInStock[gt]': 0
  }
});

第二步：后端查询逻辑改造 #

以最常见的Express+MongoDB(Mongoose)技术栈为例，只需要在查询时添加对应过滤条件即可，不需要修改Model结构：

对应方式1的后端逻辑 #

// /api/products 接口的处理逻辑
app.get('/api/products', async (req, res) => {
  const query = {}
  // 解析前端传递的最小库存参数
  if (req.query.minStock !== undefined) {
    query.countInStock = { $gt: Number(req.query.minStock) }
  }
  const products = await Product.find(query)
  res.send(products)
})

对应方式2的后端逻辑 #

如果用了qs库解析Query参数，后端可以直接拿到结构化的参数，直接传入查询即可：

const products = await Product.find(req.query)

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