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

这篇具有很好参考价值的文章主要介绍了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 格式的请求体。文章来源地址https://www.toymoban.com/news/detail-838354.html

到了这里,关于axios同时使用查询参数(query)和请求体参数(body)发送请求的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • SpringCloud Gateway 网关请求中body、query、header参数的获取和修改

          最近在开发中要改造一个普通SpringBoot接口服务为SpringCloud Gateway网关服务,并且需要在网关做验签,由于我们这个服务需要对外几个第三方平台提供接口,每家请求的传参形式都不同,有将签名信息放请求头、也有将签名信息放query参数、还有直接放body中的,请求头

    2024年01月23日
    浏览(73)
  • Vue使用axios发送get请求并携带参数

    其实关于Vue使用axios发送get请求并携带参数,我之前写过一篇,但是昨天又发现了另外一种方式,所以就单独写一篇进行总结。 之前写的那篇使用get请求并携带参数都是使用的字符串拼接的方式 感兴趣可以参考: Vue使用axios进行get请求拼接参数的两种方式 关于如何使用安装

    2023年04月10日
    浏览(57)
  • 在Vue中使用axios发送post请求时,可能会出现后端无法接收到参数的情况。

    在Vue中使用axios发送post请求时,可能会出现后端无法接收到参数的情况。这个问题的原因是axios默认发送的请求是json格式的,而后端接收的请求是form表单格式的,这就导致后端无法获取json格式的请求参数。解决这个问题可以通过设置axios的请求头部信息,将请求格式设置为

    2024年02月16日
    浏览(48)
  • 提升 Postman 使用技巧:完全掌握 Query、Path 和 Body 参数传递

    题解 | #密码验证合格程序# #include iostream#include vectorus   题解 | #数字颠倒# import java.util.Scanner;// 注意类名必须为 Main, 不要有任何 pa   淘天一面 面经 淘天一面:计算机开机的过程经历了什么?站在计算机这个视角,为什么要有操作系统?操作系统的虚拟化技术(   美团前端

    2024年04月13日
    浏览(51)
  • 【Vue框架】Vue2中axios发送请求—安装axios、配置全局域名、传递参数、axios原理之Promise(什么是Promise、使用原因、基本使用、相关API、async与await使用)

    官网: https://www.axios-http.cn/ 1.1.1 安装axios库 安装 axios 通信库: npm install axios -S 1.1.2 在全局中引入axios库 全局在main.js中引入axios: import axios from \\\'axios\\\' 1.1.3 挂在原型对象 Vue.prototype.$axios = axios; 将 axios 挂载到Vue原型对象中,实现数据共享,节约内存空间。 此时在任何页面都可

    2024年02月05日
    浏览(50)
  • vue3使用axios发送post请求,后台接收到的参数总是null,使用postman测试后台是能接收数据的

    使用vue3,连基本的请求都失败了,使用浏览器查看post请求,参数中是有值,但是传到后台,每个参数都是null,不知道哪里错了。排除了后台的错误,就剩下了vue代码的错误了。我出错的地方是vue使用axios发送post请求的时候,参数格式写错了。 直接贴代码了,正确的写法 f

    2024年02月13日
    浏览(43)
  • HTTP参数类型中的Query和Body参数

    在接口中常见到query参数和body参数,那么它对应的传参方式是? ★ query 查询参数 --- params --- route. params .参数 ★ body 请求体参数 --- data ---  route. query .参数 总结 : GET请求 只能传Query参数, POST请求 可以传Query和Body两种形式的参数 Query查询参数 ,将参数拼在请求地址上。

    2024年02月06日
    浏览(39)
  • axios 使用FormData格式发送GET请求

    如果你需要使用, FormData 格式,发送 GET请求 将参数拼接到 FormData对象 中, 使用 URLSearchParams 将 FormData对象 转换为 查询参数字符串 ,并将其拼接到URL中, 这样就能 以FormData格式发送GET请求 给服务器 注意: URLSearchParams 是ES6中的内置对象,如果你的项目中使用的是较旧的

    2024年02月11日
    浏览(42)
  • 再vue项目中使用axios原生发送post请求

    前言:在大多数项目开发中,都是采用前后端分离架构,在此情况下都采用一些成熟的框架,类似于ruoyi,因为成熟所以前端的请求都进行了各种封装,有时想单独发起一个简单的请求,还有点麻烦,因此记录一下。 因为是前后端分离,当前前端使用的端口是81,后端运行的

    2024年02月14日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包