axios同时使用查询参数(query)和请求体参数(body)发送请求 ...

打印 上一主题 下一主题

主题 770|帖子 770|积分 2310

当使用axios.post方法发送请求时,可以同时添加查询参数(query)和请求体参数(body)。具体的方法是将查询参数添加到URL中,并将请求体参数作为data属性传递给axios.post方法。
代码演示:

下面是一个示例,演示了怎样将查询参数和请求体参数同时传递给axios.post方法:
  1. import axios from 'axios';
  2. const apiUrl = 'https://api.xxx.com/post';
  3. // 查询参数
  4. const queryParam = {
  5.   key1: 'juny',
  6.   key2: 'long',
  7. };
  8. // 请求体参数
  9. const bodyParam = {
  10.   name: 'love Y',
  11.   age: 25,
  12. };
  13. axios.post(apiUrl + '?' + new URLSearchParams(queryParam), bodyParam)
  14.   .then(response => {
  15.     console.log(response.data);
  16.   })
  17.   .catch(error => {
  18.     console.error(error);
  19.   });
复制代码

在上述代码中,queryParam对象包罗要添加到URL中的查询参数,比方key1和key2。bodyParam对象包罗要发送到服务器的请求体参数,比方name和age。
在使用axios.post方法时,使用字符串拼接的方式将查询参数添加到URL中,通过new URLSearchParams(queryParam)创建查询参数的字符串。
然后,将请求体参数作为data属性传递给axios.post方法,这样它们将作为请求的正文发送给服务器。
真实项目举例:

  1.   // 获取列表
  2.             async getlist(){
  3.               let that=this
  4.       that.loading=true
  5. // 获取list数据
  6. await axios.post(API+'/warehouse/reconciliationMaster/externalSearchReconciliationList',
  7.     {...that.queryParams},
  8.     {headers: that.postval}) .then(res=> {
  9. that.tableData=res.data.data.items
  10. console.log(res,'res获取list数据');
  11. console.log(that.tableData,'table');
  12. that.total=res.data.data.total
  13. that.loading=false
  14. }) .catch(error=> {
  15.     console.log(error)
  16. })
  17.     },
复制代码
留意事项:

请留意,具体的URL和请求参数结构应根据你的实际情况举行调整。
   在使用 query 和 body 参数时需要留意以下几点:
  

  • Query 参数一样平常用于 GET 请求,将参数构成 URL 的一部分,比如: api.example.com/user?username=jack&age=18,这种形式的请求通常用于获取资源。在 Express 框架中,可以通过 req.query 获取到查询字符串参数。由于它是在 URL 中出现的,所以大小写敏感。
  • Body 参数一样平常用于 POST、PUT、PATCH 等请求,将参数放在请求体中,比如表单提交、JSON 数据上传等,这种形式的请求通常用于创建或更新资源。在 Express 框架中,可以通过 req.body 获取到请求体参数。由于它是在请求体中的,所以大小写不敏感。
  • 在使用 Query 参数时,需要留意 URL 的最大长度限定,如果参数太多会导致 URL 过长,可能引起请求失败或参数丢失。
  • 差别类型的参数都有大小限定,默认情况下 Node.js 的 http 模块只支持最大 80KB 的请求头,10MB 的请求体。如果请求体大小超过限定,需要使用流或文件上传等方式。
  • Query 参数和 Body 参数的字段名称需要同等,如果字段名称差别等可能导致参数无法正确传递。如果需要使用差别名称的字段,则需要在后端代码中手动处理惩罚参数。
  • 在使用 POST 或 PUT 请求时,需要将参数设置为 JSON 格式(Content-Type: application/json),并将参数转换为 JSON 字符串。可以使用 JSON.stringify() 方法将对象转换为 JSON 字符串。在 Express 框架中,可以使用 body-parser 中央件剖析 JSON 格式的请求体。

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

惊落一身雪

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表