React中使用Axios调用Get接口时如何传递带空格的字符串查询参数

你直接拼接带空格的URL发起请求无返回的原因有两个：

1. URL规范不允许直接出现空格等特殊字符，未经编码的参数会导致服务端解析失败，返回空结果
2. jsonplaceholder接口的多个查询参数为逻辑与（AND）关系，同时传递id和title时，只会返回同时满足两个条件的记录，不存在符合要求的记录自然返回空数组

正确的参数传递方式 #

Axios的get方法支持传入第二个配置对象，通过params字段传递查询参数，Axios会自动对所有参数做URL编码（空格会被转义为符合规范的格式），无需手动拼接处理，是最推荐的写法。

参数传递示例如下：

// 单请求示例（注意：当前为AND逻辑，仅作参数传递演示，不会返回你需要的三条记录）
Axios.get('https://jsonplaceholder.typicode.com/posts', {
  params: {
    id: [2, 3],
    title: 'eum et est occaecati'
  }
})

满足需求的完整实现 #

如果你需要获取id=2、id=3、id=4（通过title匹配）三条记录，可以通过并发两个请求后合并结果的方式实现，修改后的componentDidMount代码如下：

componentDidMount() {
  Promise.all([
    // 请求id为2、3的记录
    Axios.get('https://jsonplaceholder.typicode.com/posts', {
      params: { id: [2, 3] }
    }),
    // 请求title匹配的记录（即id=4的记录）
    Axios.get('https://jsonplaceholder.typicode.com/posts', {
      params: { title: 'eum et est occaecati' }
    })
  ]).then(([idRes, titleRes]) => {
    // 合并两个结果数组更新状态
    this.setState({ posts: [...idRes.data, ...titleRes.data] })
  })
}

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