axios中post请求 json 和 application/x-www-form-urlencoded
前端向后端传输数据时,如果是get传输,直接传在url后;如果是post传输,则在请求体body中传输。
在body中的数据格式又有两种,一种是 json 数据格式,另一种是 字符串。具体要用哪种格式取决于后端入参的格式。
如果后端接收json数据类型,post请求头headers 需要设置 { ‘content-type’: ’application/json’ },传给后端的数据就形如 { ‘name’:’edward’, ‘age’:’25’ }
如果后端接收的是(表单)字符串类型,post请求头headers 需设置 { ‘content-type’: ’application/x-www-form-urlencoded’ },
,传输给后端的数据就形如 ‘name=edward&age=25’
qs
qs.stringfy() 将对象序列化成URL的形式
axios默认数据格式为json,所以:
1.当后端需要接收json格式的数据时,post请求头不需要设置请求头,数据格式也不需要我们去转换(若数据已经是json);
2.当后端需要接收字符串格式的数据时,我们需要给post请求头设置{ ‘content-type’: ’application/x-www-form-urlencoded’ },
这个时候如果我们传的入参是一个 js 对象,这时候我们就需要用 qs 转换数据格式,qs具体用法如下:
安装模块:npm i qs -S
import qs from 'qs'; const data = { name:'edward' , age:'25'}; // 我们传的是 js 对象 const options = { method: 'POST', headers: { 'content-type': 'application/x-www-form-urlencoded' }, data: qs.stringify(data), // 用 qs 将js对象转换为字符串 'name=edward&age=25' url, }; axios(options);
我们也可以在封装axios的时候,给它全局设置qs
axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
【区分】: JSON.stringfy() 和 qs.stringfy()
let data = { name: 'edward', age: '25' }
前者:JSON.stringfy(data) // { 'name' : 'edward' , 'age' : '25' }
后者:qs.stringfy(data) // 'name=edward&age=25'
原文地址:https://www.cnblogs.com/edwardwzw/p/11694903.html
- [SQLServer大对象]——FileTable初体验
- JavaScript闭包,只学这篇就会了
- [数据库基础]——编码标准之格式
- [数据库基础]——编码标准之结构
- 2017前端开发手册三-前端职位描述
- [.NET自我学习]Delegate 泛型
- [数据库基础]——图解JOIN
- ubuntu搭建内网穿透服务Ngrok
- SQL Server 性能优化之——T-SQL 临时表、表变量、UNION
- node.js 学习笔记
- SQL Server 性能优化之——T-SQL TVF和标量函数
- C# 6.0 功能预览 (一)
- [译]Asp.net MVC 之 Contorllers(二)
- [译]Asp.net MVC 之 Contorllers(一)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法