javascript - get请求为什么有的请求参数放到链接后面有的放到请求参数中？

Question

今天调用了一个接口，接口要求传一个日期过去，当时没仔细看(因为文档也没写请求参数和相应参数)，以为是传一个data，里面有条件查询的参数之类的，结果第一次报错。

    export function todayUserNum(data){        return request({            url:'/system/home/todayNum',            method:'get',            data:data        })    }

Required request parameter 'date' for method parameter type String is not present(方法参数类型字符串所需的请求参数“日期”不存在)

后面第二次调用的时候注意到了文档上的参数说明，于是就改成了这个样子

    export function todayUserNum(date){        return request({            url:'/system/home/todayNum',            method:'get',            params:date        })    }

同样接口给我抛出了上述的错误，并且我的请求参数值被分割了，我意识到可能是框架的某块公用请求将参数值分割了。我又更换了一次写法

    export function todayUserNum(date){        return request({            url:'/system/home/todayNum?date='+date,            method:'get'        })    }

这次接口成功获取到了数据，但是我又试了试另一种写法

    export function todayUserNum(date){        return request({            url:'/system/home/todayNum'+date,            method:'get'        })    }

这时候接口抛出了404异常

Error: Request failed with status code 404

我又又尝试了一下其他写法，这一次，我将请求参数放在了请求体里面

    export function todayUserNum(date){        return request({            url:'/system/home/todayNum'+date,            method:'get',            params:{                date:date            }        })    }

接口请求成功

但是有的接口的get请求方式就用上述的某种方法可以走通，比如：

    1. export function getCheck(id) {          return request({            url: '/system/check/' + id,            method: 'get'          })       }    2. export function listCheck(query) {          return request({            url: '/system/check/list',            method: 'get',            params: query          })       }

我不太懂这种写在链接后的和写在请求体上的区别在哪里，而且也不太懂为什么有的参数可以直接将值放上去，有的要规定请求参数名和值，希望大佬可以解答一下

Answer 1

就算你没接触后端接口设计也没关系。
前端的路由你应该知道，路由里面有两个关键的概念，

1.params：/router1/:id ，    //router1/123，/router1/789 ,这里的id叫做params2.query：/router1?id=123 ,  //router1?id=456 ,这里的id叫做query。

query添加需要按照浏览器规则来拼接 ?id=123&id2=567&id3=789
axios中的params接受一个对象 他最终也会以query的形式给你拼接到 url 后面

Answer 2

这个问题涉及到 HTTP 请求和 API 设计的一些基本概念。

首先，要理解 HTTP GET 请求的格式。GET 请求通常会将参数放在 URL 中，这些参数通常被称为查询字符串（query string）。查询字符串是以 '?' 字符分隔 URL 和参数的，参数本身是由 '&' 字符分隔的键值对。例如：/system/home/todayNum?date=2023-07-06。

在你的例子中，接口 /system/home/todayNum 要求一个名为 'date' 的参数。这个参数可以是 URL 中的查询字符串参数，也可以是请求体中的内容。但是，这取决于你使用的 API 和框架，以及你尝试实现的功能。

• 在你的第一个尝试中，你将参数放在了请求体中：export function todayUserNum(data){...}。这是 POST 和 PUT 请求的常见做法，而不是 GET 请求。GET 请求的数据通常放在 URL 中，而不是请求体中。所以，你的接口抛出了 404 异常，因为服务器没有找到以 '/system/home/todayNum' 开头的路径。
• 在你的第二个尝试中，你将参数放在了 URL 的查询字符串中：export function todayUserNum(date){...}。这是正确的 GET 请求做法。在这种情况下，你的接口成功获取了数据，因为服务器可以正确解析查询字符串中的 'date' 参数。
• 在你的第三个尝试中，你将参数直接放在了 URL 中，没有使用查询字符串：export function todayUserNum(date){...}。这也是可以的，只要你的服务器能够解析出 '/system/home/todayNum2023-07-06' 中的 '2023-07-06'。但是，这种方法可能会让其他开发者混淆，因为并不是所有的 API 都支持这种格式。
• 在你的第四个尝试中，你将参数放在了请求体中，但是使用了 'params' 属性：export function todayUserNum(date){...}。这也是可以的，只要你的服务器能够解析出请求体中的 'date' 参数。但是，这并不是 GET 请求的标准做法。

总的来说，你应该将 GET 请求的参数放在 URL 的查询字符串中，除非你明确知道你的 API 支持将参数放在请求体中。对于 POST 和 PUT 请求，你应该将参数放在请求体中。