前端请求接口data和params区别

最新推荐文章于 2023-09-15 19:41:10 发布
最新推荐文章于 2023-09-15 19:41:10 发布
阅读量4.3k 收藏 31
点赞数 6
分类专栏： 项目实战小问题 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45018844/article/details/114255541
版权

发送请求data和params

首先，在我们使用axios时，像这种情况
在这里插入图片描述
在这里插入图片描述
我总是不知道怎么区别，只能一个个的试，但是这可不是好办法，所以我总结了一下。

  • params是添加到url的请求字符串中的，用于get请求
  • 而data是添加到请求体（body）中的， 用于post请求
  • 这两点就很好区别了，如果我们将params修改为data，显然是不能请求成功的，因为get请求中不存在data这个选项。

接口文档

在这里插入图片描述
接口文档是这样的，接下来上代码，这是正确的，post请求配data
age/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDE4ODQ0,size_16,color_FFFFFF,t_70)

看我接下来改成params
在这里插入图片描述

{"code":405,"success":false,"data":{},"msg":"Request method 'GET' not supported"}

直接报错
在这里插入图片描述
在这里插入图片描述
翻译一下，提示我缺少请求正文，因为post请求匹配不到params，所以就提示没有，打开控制台，提示我缺少body，因为params是添加到url的请求字符串中的，用于get请求。
而data是添加到请求体（body）中的， 用于post请求，所以在此处需要使用data！！！
在这里插入图片描述

小莉爱编程
关注
  • 6
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
前端开源库-get-params
08-29
前端开源库-get-params获取参数，获取函数参数变量名的列表
VueJs 搭建Axios接口请求工具
10-18
在请求函数中，根据请求方法（GET、POST、PUT、DELETE等）来设置不同的请求配置，如 `data` 或 `params`。所有的请求都应基于前面配置的 `baseURL` 发送。 #### 请求与响应的处理 使用 Axios 发送请求后，需要处理...
前端给后端发送请求时：data和params的区别
955姜太根的博客
02-22 930
前端给后端发送请求时：data和params的区别。
前端调取接口时--params与data的区别
syl的博客
04-26 616
params与data的区别相当于是get与post的区别 export function getStructuredInfo(params) { return request({ url: api + '/experimentReport/getStructuredReportInfo', method: 'GET', params }) } export function saveReportComment(data) { return request({
post请求用data来接收参数（走的是请求体），get请求用params来接收参数（这个走的是路径）
有时间可以指导毕业设计，可以私聊我。一个热爱编程的smallCuteMonkey，可以私信我
11-15 880
后端需要接收前端的两个实现类的参数，可以在后端封装一个工具类 SignVo: package com.hundsun.bontal.demo.VO; import com.hundsun.bontal.demo.model.TbSignInfo; import com.hundsun.bontal.demo.model.TbUser; import lombok.AllArgsConstructor; import lombok.Data; @Data public class SignVO {
携带参数params和data的区别
weixin_50391597的博客
10-11 416
param中的参数是get请求,会拼到地址后面 data中的参数是post请求
接口传参时请求方式data和params的区别
最新发布
XMCYD的博客
09-15 2027
在使用API请求时，有两种方式可以传递参数：data和params。其中，data主要用于传递请求体中的参数，而params主要用于传递查询参数。因此，需要注意请求方式的选择，以及参数应该通过哪个选项进行传递，保证请求的正确性。，则该请求将变成一个 POST 请求，而不是 GET 请求，且请求体中会携带。用于 GET 请求的 URL 参数，而。用于 POST 请求的请求体。参数，而不是 URL 参数。中，请求参数可以通过。
Vue 设置axios请求格式为form-data的操作步骤
10-16
然而，有时在发送POST请求时，后端可能无法接收到数据，即使前端显示请求已发送。这可能是因为默认情况下，axios发送的数据格式不是`form-data`。为了解决这个问题，我们需要手动设置axios的请求头，使其发送`form-...
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
10-16
然而，在某些情况下，尤其是当对同一个接口连续发起请求时，可能会遇到返回数据混乱的问题。这主要是由于网络延迟、请求并发控制等因素导致请求的顺序与预期不符，从而影响了前端的数据处理。本文将深入探讨这个问题...
前端项目-js-data-http.zip
09-03
适配器的概念源于软件工程中的“适配器模式”，它允许不同的组件之间通过一个统一的接口进行通信，即使它们的内部结构和实现不同。 首先，我们来了解JavaScript在处理数据方面的作用。JavaScript作为浏览器端的主要...
【requests|get/post】params 和 data比较
胡侃有料的博客
01-14 1482
every blog every motto: What doesn’t kill you makes you stronger. 0. 前言 简单记录一下 1. 正文 1.1 params 1.1.1 get import requests # get dic = {"name":'john',"gender":'1'} url = 'https://httpbin.org/get' res = requests.get(url,params=dic) print(res.text) 1.1.2 p
axios和postman中，param和data的使用，post和get的使用
tiandaochouqin_1的博客
08-12 2919
后端：@RequestBody，用于post请求 前端：参数放在postman的body中，axios使用data 后端：@RequestParam，用于get请求 前端：参数放在postman的params中，axios使用params ...
传参data params
weixin_58414196的博客
12-30 308
post请求用 data传参 get请求用 params传参
【前端VUE基础（九）】路由传参：params参数和query参数
shanglin1122的博客
08-04 1289
当与后端进行数据交互时，前端常常需要将参数传递给后端API。参数传递方式有多种，其中包括params参数和query参数。本教程将介绍这两种参数传递方式，并提供示例和分析。
data和params传参的区别
weixin_53500514的博客
03-30 2493
get请求参数是带在url上的，必须使用params，这个是肯定的，但是post的请求就不一定了 post请求既可以使用params，也可以使用data 区别是：data是放在body里的，在url中看不见参数，但是使用params的话，说明参数在url里面是能够看见的 可以根据不同的情况使用参数传参 简单总结：能看见的参数，传参就用params，看不见的参数，就用data ...
关于接口请求时的params和data区别
CSDNdk1997的博客
01-08 806
因为params是添加到url的请求字符串中的，用于get请求。 而data是添加到请求体（body）中的， 用于post请求。
如何在前端异步给后端传值时选择params以及data
aguo111的博客
06-08 414
2.当你需要传递一个对象时这是需要用到data向后端传值会做一个转json处理这样你后端定义的对象就能获得前端传递的数据同时应该将注解改成@RequesBody接收前端传值示例。3.组合传值需要一个固定变量以及多个对象的值可以将上述结合传值示例。注意：上述不区分get，post方式。
前端传递参数params和data的区别
qq_44614115的博客
02-26 7045
本文学习记录了前端传递参数params和data的区别
layui data-params属性的data传多个参数
qq_37273784的博客
12-21 9211
<script type="text/html" id="deletedFlagTp"> <input type="checkbox" name="deletedFlag" lay-skin="switch" lay-text="启用|禁用" value="0" lay-filter="ajax"
data-params传参
09-04
data-params是一个常见的传参方式，用于将数据以参数的形式传递给后台接口。它通常在前端发送请求时使用，可以将数据以键值对的形式附加在请求中。在后台接收到请求时，可以通过解析参数获取传递的数据。 例如，假设有一个接口需要传递用户名和密码进行用户登录，可以使用data-params的方式将这两个参数传递给后台。具体的使用方法会根据不同的编程语言和框架而有所不同。 以下是一个示例的使用方法（假设使用JavaScript）： ```javascript const username = "john"; const password = "123456"; const url = "http://example.com/login"; const dataParams = `username=${username}&password=${password}`; fetch(url, { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded", }, body: dataParams, }) .then((response) => response.json()) .then((data) => { // 处理返回的数据 }) .catch((error) => { // 处理请求错误 }); ``` 在上述示例中，将用户名和密码以键值对的形式拼接在dataParams字符串中，并通过fetch函数发送POST请求。后台接收到请求后，可以解析data-params获取到用户名和密码进行相应的处理。 需要注意的是，data-params是一种常见的传参方式，但并不是唯一的方式。在实际开发中，也可以使用其他的传参方式，如使用JSON格式传递数据等，具体选择哪种方式取决于实际需求和开发环境。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小莉爱编程

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

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

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

打赏作者

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

抵扣说明：

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

余额充值