axios配置请求头content-type 和 get/post请求方式

axios配置请求头content-type 

 https://blog.csdn.net/wojiushiwo945you/article/details/107653962

  • axios 是Ajax的一个插件,axios虽然是一个插件,但是我们不需要通过Vue.use(axios)来使用,下载完成后,只需在项目中引入即可。(一般我们放在了请求接口的公共文件中引用)
npm install axios -S
  • axios 发送post请求时默认是直接把 json 放到请求体中提交到后端的,axios默认的请求头content-type类型是’application/json;charset=utf-8’.

  • content-type的三种常见数据格式:

// 1 默认的格式请求体中的数据会以json字符串的形式发送到后端'Content-Type: application/json '
// 2 请求体中的数据会以普通表单形式(键值对)发送到后端'Content-Type: application/x-www-form-urlencoded'
// 3 它会将请求体的数据处理为一条消息,以标签为单元,用分隔符分开。既可以上传键值对,也可以上传文件'Content-Type: multipart/form-data'
  • Content-Type: application/json这种参数是默认的就不说了
  • 若后端需要接受的数据类型为:application/x-www-form-urlencoded,我们前端该如何配置:
    1 用 URLSearchParams 传递参数
var param = new URLSearchParams()param.append('name',name)param.append('age' , age)
axios({method:'post',url: url,data : param,}).then(res => res).catch(err => err)

2 配置axios请求头中的content-type为指定类型(这个比较常用)

axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";

3 引入 qs ,这个库是 axios 里面包含的,不需要再下载了

import Qs from 'qs'
let params= {"name": "ll","age": "18"
}axios({headers: {'Content-Type': 'application/x-www-form-urlencoded'},method: 'post',url: url,data: Qs.stringify(params)
})
  • 若后端需要接受的数据类型为:Content-Type: multipart/form-data,我们前端该如何配置:
    应用场景:对于这种类型的数据,我们常见前端页面上传个人图像,然后点击保存发送后端修改原始数据
let params = new FormData()
params.append('file', this.file)
params.append('qq', this.qq)
params.append('weChat', this.WeChat)
axios.post(URL, params, {headers: {'Content-Type': 'multipart/form-data'}}).then(res => {if (res.data.code === 0) {this.$router.go(-1)}}).catch(error => {alert('更新用户数据失败' + error)})

axios中get/post请求方式

1. 前言

最近突然发现post请求可以使用params方式传值,然后想总结一下其中的用法。

2.1 分类

image.png


get请求中没有data传值方式
经过查阅资料,get请求是可以通过body传输数据的,但是许多工具类并不支持此功能。
在postman中,选择get请求后,body选项自动变为了灰色。
即,不建议使用此方式传输数据。

2.2 get请求

params

基础类型接收,名字对应即可
// method
const params = {id: '123456789',name: '张三'
}
test(params)// api
export function test (params) {return axios({url: url,method: 'GET',params: params})
}// 后台
@GetMapping("/test")
public Result test(Long id, String name) {return Res.ok();
}
使用Map接收,需要添加 RequestParam 注解
// method
const params = {id: '123456789',name: '张三'
}
test(params)// api
export function test (params) {return axios({url: url,method: 'GET',params: params})
}// 后台
@GetMapping("/test")
public Result test(@RequestParam Map<String, Object> map) {return Res.ok();
}
使用实体类接收
// 实体类
@Data
public class TestEntity {Long id;String name;
}// method
const params = {id: '123456789',name: '张三'
}
test(params)// api
export function test (params) {return axios({url: url,method: 'GET',	params: params})
}// 后台
@GetMapping("/test")
public Result test(TestEntity testEntity) {return Res.ok();
}

ps: get请求不允许传递List,需要使用qs插件或者配置axios,具体参考链接

2.3 post请求

2.3.1 params 与 get方式相同

与get相似,基础类型接收,名字对应即可
// method
const params = {id: '123456789',name: '张三'
}
test(params)// api
export function test (params) {return axios({url: url,method: 'POST',params: params})
}// 后台
@PostMapping("/test")
public Result test(Long id, String name) {return Res.ok();
}
与get相似,使用map接收
// method
const params = {id: '123456789',name: '张三'
}
test(params)// api
export function test (params) {return axios({url: url,method: 'POST',params: params})
}// 后台
@PostMapping("/test")
public Result test(@RequestParam Map<String, Object> map) {return Res.ok();
}
与get相似,使用实体类接收
// 实体类
@Data
public class TestEntity {Long id;String name;
}// method
const params = {id: '123456789',name: '张三'
}
test(params)// api
export function test (params) {return axios({url: url,method: 'POST',	params: params})
}// 后台
@PostMapping("/test")
public Result test(TestEntity testEntity) {return Res.ok();
}

2.3.2 data

使用实体类接收
// 实体类
@Data
public class TestEntity {Long id;String name;
}// method
const params = {id: '123456789',name: '张三'
}
test(params)// api
export function test (params) {return axios({url: url,method: 'POST',	data: params})
}@PostMapping("/test")
public Result test(@RequestBody TestEntity testEntity) {return Res.ok();
}

JAVA 复制 全屏

4. 总结

总体来说,只要使用 params get与post请求基本是一样使用的,如果参数名与传递名称不一致,需要使用@RequestParam修饰,若使用Map接收参数,必须使用@RequestParam修饰。但是如果想传list类型的数据,需要使用单独的方法处理(参考链接)。
若使用data传递参数,必须使用一个实体类接收参数,而且需要添加注解@RequestBody进行修饰。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/581841.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PHP文件上传以及数据写入

文件打开和数据写入 在PHP中&#xff0c;可以通过使用fopen()函数来打开一个文件。它接受两个参数&#xff1a;文件路径和打开模式。打开模式可以是"r"&#xff08;只读&#xff09;, "w"&#xff08;写入&#xff0c;如果文件不存在则创建文件&#xff0…

NFC刷卡soc芯片SI3262集成刷卡+触摸+ACD超低功耗一体

简介 13.56mhz刷卡soc芯片SI3262集成刷卡触摸ACD超低功耗&#xff0c;ACD模式刷卡距离可达到5cm以上&#xff0c;非常适用于小体积门锁&#xff0c;密码锁&#xff0c;柜锁&#xff0c;接下来介绍一下这款芯片的具体功能。 优势 1.超低功耗&#xff0c;最低功耗达 1.7uA&…

揭秘跨境电商ERP源码定制化需求及最佳实践

跨境电商ERP源码的定制化需求是跨境电商企业在整个ERP系统开发实施过程中需要重点关注的问题之一。本文将围绕跨境电商ERP源码定制化的需求和最佳实践展开深入探讨&#xff0c;为行业内的从业者和相关人士提供一些建议和思路。 定制化需求 跨境电商ERP的业务特点决定了对源码…

RivaGAN 水印项目

git地址 https://github.com/DAI-Lab/RivaGAN Dockerfile (/tools下文件为git下的文件) ############################################### # 使用 NVIDIA CUDA 10.0 开发环境作为基础镜像 FROM kaldiasr/kaldi:gpu-ubuntu18.04-cuda10.0 # 设置非交互式安装模式以避免某些命…

Vue 模板编译原理

Vue 模板编译原理是指将 Vue 的模板转换为渲染函数的过程。在 Vue 中&#xff0c;模板被定义为 HTML 代码片段或者在 .vue 单文件组件中定义。当 Vue 实例化时&#xff0c;会将模板编译为渲染函数&#xff0c;该函数可以根据组件的状态生成虚拟 DOM 并更新视图。 Vue 的模板编…

8.小明和完美序列

题目 import java.util.HashMap; import java.util.Map; import java.util.Map.Entry; import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int n sc.nextInt();sc.nextLine();Map<Integer,Intege…

Spring HTTP请求与应答国密算法加解密(对称加密方式SM4)

SM4算法成为行业标准: SM4分组密码算法是2012年3月21日实施的一项行业标准;2021年6月25日,我国SM4分组密码算法作为国际标准ISO/IEC 18033-3:2010/AMD1:2021《信息技术 安全技术 加密算法 第3部分:分组密码 补篇1:SM4》,由国际标准化组织ISO/IEC正式发布;中文名SM4分组…

Flask登陆后登陆状态及密码的修改和处理

web/templates/common 是统一布局 登录成功 后flask框架服务器默认由login.html进入仪表盘页面index.html(/),该页面的设置在 (web/controllers/user/index.py)&#xff0c;如果想在 该仪表盘页面 将 用户信息 展示出来&#xff0c;就得想办法先获取到 当前用户的 登陆状态。…

2022年全国职业院校技能大赛高职组云计算正式赛卷第三场-公有云

2022 年全国职业院校技能大赛高职组云计算赛项试卷 【赛程名称】云计算赛项第三场-公有云 目录 2022 年全国职业院校技能大赛高职组云计算赛项试卷 【赛程名称】云计算赛项第三场-公有云 【任务 1】公有云服务搭建[10 分] 【任务 2】公有云服务运维[10 分] 【任务 3】公有云运维…

兔子的序列

题目&#xff1a; 输入描述&#xff1a; 第一行一个整数 n&#xff0c;表示序列的长度。 第二行有 n 个整数 ai&#xff0c;表示序列中的 n 个数分别是多少。 输出描述&#xff1a; 输出仅一行&#xff0c;表示这个序列的名字&#xff0c;也就是这个序列中最大的非完全平方…

03.MySQL的体系架构

MySQL的体系架构 一、MySQL简介二、MySQL的体系架构三、MySQL的内存结构四、MySQL的文件结构 一、MySQL简介 MySQL是一个开源的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;由瑞典MySQL AB公司开发&#xff0c;后被Sun公司收购&#xff0c;Sun公司被Oracle…

【Web2D/3D】Canvas(第三篇)

1. 前言 <canvas>是HTML5新增元素&#xff0c;它是一个画板&#xff0c;开发人员基于它的2D上下文或webgl上下文&#xff0c;使用JS脚本绘制简单的动画、可交互画面&#xff0c;甚至进行视频渲染。 本篇介绍基于canvas的2D上下文绘制2D画面的一些方法和属性。 2. canvas…

【leetcode225】用队列实现栈Java代码讲解

12.27 225. 用队列实现栈 请你仅使用两个队列实现一个后入先出&#xff08;LIFO&#xff09;的栈&#xff0c;并支持普通栈的全部四种操作&#xff08;push、top、pop 和 empty&#xff09;。 实现 MyStack 类&#xff1a; void push(int x) 将元素 x 压入栈顶。int pop() 移除…

文件操作安全之-目录穿越流量告警运营分析篇

本文从目录穿越的定义,目录穿越的多种编码流量数据包示例,目录穿越的suricata规则,目录穿越的告警分析研判,目录穿越的处置建议等几个方面阐述如何通过IDS/NDR,态势感知等流量平台的目录穿越类型的告警的线索,开展日常安全运营工作,从而挖掘有意义的安全事件。 目录穿越…

向ES索引里面添加一个字段并更新旧文档数据

问题 最近需要调整ES索引&#xff0c;添加1个字段&#xff0c;并且&#xff0c;对旧文档数据更新新加的字段默认值。 解决思路 通过利用Update mapping API添加1个新字段后&#xff0c;然后&#xff0c;利用Update By Query API将向旧文档数据添加新加字段默认值。 添加字段…

鸿蒙Harmony(八)ArkUI--状态管理器之@State

状态管理 在声明式UI中&#xff0c;是以状态驱动视图更新 状态&#xff1a;指驱动视图更新的数据&#xff08;被装饰器标记的变量&#xff09; StateProp 和 LinkProvide和 Consume State State装饰器标记的变量必须初始化&#xff0c;不能为空值State支持Object 、class、…

ts中的任意接口

interface Persontest {name:string;[key:string]:any } var psss:Persontest{name:1,age:10,sex:男,[Symbol()]:灵境胡同 }ts中&#xff0c;[Symbol()] 是一个计算属性名称的语法&#xff0c;可以在对象字面量中使用 Symbol 类型来动态地生成属性名称&#xff0c;[Symbol()] 生…

【PostgreSQL内核学习(二十)—— 数据库中的遗传算法】

数据库中的遗传算法 概述个体的编码方式及种群初始化geqo 函数 适应值geqo_eval 函数gimme_tree 函数 父体选择策略geqo_selection 函数 杂交算子边重组杂交 ERX ( edge recombination crossover)gimme_edge_table 函数gimme_tour 函数 变异算子geqo_mutation 函数 声明&#x…

Java EE 网络原理之HTTP 响应详解

文章目录 1. 认识"状态码"(status code)2. 通过 form 表单构造 HTTP 请求3. 通过 ajax 构造 HTTP 请求 1. 认识"状态码"(status code) 表示了这次请求对应的响应&#xff0c;是什么样的状态 &#xff08;成功&#xff0c;失败&#xff0c;其他的情况&…

Flask 用户信息编辑系统

Flask 用户信息编辑系统 web/templates/user/edit.html {% extends "common/layout_main.html" %} {% block content %} {% include "common/tab_user.html" %} <div class"row m-t user_edit_wrap"><div class"col-lg-12"…