如何通过axios GET方法从对象数组中获取指定ID的对象？

你的问题出在Axios GET请求的参数传递方式和POST不同：POST请求会把第二个参数作为请求体发送，但GET请求的参数需要放在URL路径里，或者作为URL的查询参数（通过配置对象的params字段）。

两种常见的修正方案 #

方案1：将ID拼接到URL路径中（多数RESTful API的做法） #

如果你的API设计是通过/todo/{id}来获取单条数据，修改JS代码如下：

const axiosGet = document.axiosget;

axiosGet.addEventListener("submit", function(event){
  event.preventDefault();

  const targetId = axiosGet.id.value;
  // 把ID直接拼接到URL末尾
  axios.get(`https://api.sample.io/todo/${targetId}`)
    .then((response) => console.log(response.data))
    .catch((error) => console.log(error));
});

方案2：将ID作为URL查询参数传递 #

如果API要求通过?id=xxx的形式传递ID，需要把参数放在Axios配置对象的params属性里：

const axiosGet = document.axiosget;

axiosGet.addEventListener("submit", function(event){
  event.preventDefault();

  const axiosGetId = {
    id: axiosGet.id.value
  };
  // GET请求的参数要放在params字段中
  axios.get("https://api.sample.io/todo", { params: axiosGetId })
    .then((response) => console.log(response.data))
    .catch((error) => console.log(error));
});

为什么POST能正常工作？ #

POST请求的第二个参数会被Axios自动作为请求体（Request Body）发送给后端，这符合POST提交数据的规范；但GET请求没有请求体，所有参数都需要通过URL传递，所以不能直接把参数对象作为第二个参数传入。

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