如何在React与Axios中传递数组类型的查询字符串？

后端API已通过Postman验证可用，支持通过重复的receiver查询参数过滤数据，示例端点：

localhost:3040/v2/feedback/filter/average-ratings?receiver=62c2dd106742823a69f98dac&receiver=62aec70881e46a4794b3a424

但前端实现时，后端返回receiver未定义错误，原请求代码如下：

export const filterAverageRating = async (receiver) => {
  console.log('Receiver ID', receiver); //['62c2dd106742823a69f98dac', '62aec70881e46a4794b3a424']
  const accessJWT = sessionStorage.getItem('accessJWT');
  const config = {
    headers: {
      'Content-Type': 'application/json',
      Authorization: accessJWT,
    },
  };
  const { data } = await axios.get(
    ENDPOINT_URL + 'filter/average-ratings',
    config,
    { params: { receiver } }
  );

  return data;
};

问题原因 #

Axios的get方法签名是axios.get(url[, config])，第三个参数不会被识别为配置项。你把params单独作为第三个参数传递，导致Axios没有把数组参数添加到查询字符串中，后端自然无法获取到receiver参数。

修正后的代码 #

将params合并到第二个参数的config对象中：

export const filterAverageRating = async (receiver) => {
  console.log('Receiver ID', receiver); //['62c2dd106742823a69f98dac', '62aec70881e46a4794b3a424']
  const accessJWT = sessionStorage.getItem('accessJWT');
  const config = {
    headers: {
      'Content-Type': 'application/json',
      Authorization: accessJWT,
    },
    params: { receiver } // 将params放入config对象内
  };
  const { data } = await axios.get(
    ENDPOINT_URL + 'filter/average-ratings',
    config
  );

  return data;
};

说明 #

Axios默认会将数组类型的params参数格式化为重复的key=value形式，也就是生成和Postman示例一致的查询字符串，这样后端就能正确识别receiver数组参数了。

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