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

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

代码演示:

下面是一个示例,演示了如何将查询参数和请求体参数同时传递给axios.post方法:

import axios from 'axios';

const apiUrl = 'https://api.xxx.com/post';

// 查询参数
const queryParam = {
  key1: 'juny',
  key2: 'long',
};

// 请求体参数
const bodyParam = {
  name: 'love Y',
  age: 25,
};

axios.post(apiUrl + '?' + new URLSearchParams(queryParam), bodyParam)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

在上述代码中,queryParam对象包含要添加到URL中的查询参数,例如key1key2bodyParam对象包含要发送到服务器的请求体参数,例如nameage

在使用axios.post方法时,使用字符串拼接的方式将查询参数添加到URL中,通过new URLSearchParams(queryParam)创建查询参数的字符串。

然后,将请求体参数作为data属性传递给axios.post方法,这样它们将作为请求的正文发送给服务器。

真实项目举例:

  // 获取列表
            async getlist(){
              let that=this
      that.loading=true
// 获取list数据
await axios.post(API+'/warehouse/reconciliationMaster/externalSearchReconciliationList',
    {...that.queryParams},
    {headers: that.postval}) .then(res=> { 

that.tableData=res.data.data.items
console.log(res,'res获取list数据');
console.log(that.tableData,'table');
that.total=res.data.data.total
that.loading=false
}) .catch(error=> { 
    console.log(error)
})
    },

注意事项:

请注意,具体的URL和请求参数结构应根据你的实际情况进行调整。

在使用 query 和 body 参数时需要注意以下几点:

  1. Query 参数一般用于 GET 请求,将参数组成 URL 的一部分,比如: api.example.com/user?username=jack&age=18,这种形式的请求通常用于获取资源。在 Express 框架中,可以通过 req.query 获取到查询字符串参数。因为它是在 URL 中出现的,所以大小写敏感。

  2. Body 参数一般用于 POST、PUT、PATCH 等请求,将参数放在请求体中,比如表单提交、JSON 数据上传等,这种形式的请求通常用于创建或更新资源。在 Express 框架中,可以通过 req.body 获取到请求体参数。因为它是在请求体中的,所以大小写不敏感。

  3. 在使用 Query 参数时,需要注意 URL 的最大长度限制,如果参数太多会导致 URL 过长,可能引起请求失败或参数丢失。

  4. 不同类型的参数都有大小限制,默认情况下 Node.js 的 http 模块只支持最大 80KB 的请求头,10MB 的请求体。如果请求体大小超过限制,需要使用流或文件上传等方式。

  5. Query 参数和 Body 参数的字段名称需要一致,如果字段名称不一致可能导致参数无法正确传递。如果需要使用不同名称的字段,则需要在后端代码中手动处理参数。

  6. 在使用 POST 或 PUT 请求时,需要将参数设置为 JSON 格式(Content-Type: application/json),并将参数转换为 JSON 字符串。可以使用 JSON.stringify() 方法将对象转换为 JSON 字符串。在 Express 框架中,可以使用 body-parser 中间件解析 JSON 格式的请求体。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

じòぴé南冸じょうげん

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值