有关axios post参数的传值问题

let data = {}

axios({
    url: '连接地址 path参数直接放里面',
    method: 'post 默认是 get',
    params: '必须是一个无格式对象 query参数',
    data: '是作为请求主体被发送的数据 body参数',
    timeout: 1000,
    headers: 'object 发送的自定义请求头'
})
let data = {}

axios.post( '连接地址 path和query参数直接放里面', '是作为请求主体被发送的数据 body参数', {
    timeout: 1000,
    headers: 'object 发送的自定义请求头'
})

1.json

headers里面设置'Content-Type': 'application/json; charset=utf-8'

data直接传object就行

2.form-data

let data = new FormData()
data.append('age', '34')
data.append('name', 'peter')

headers里面设置'Content-Type': 'multipart/form-data'

data直接传object就行

3.application/x-www-form-urlencoded

方法一

const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

方法二

import qs from 'Qs'
let data = {"code":"1234","name":"yyyy"};

下面我们来看看application/x-www-form-urlencoded与application/json的区别

说明:这两个都是发送请求的格式说明

1.application/x-www-form-urlencoded

在Form元素的语法中,EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型。 下边是说明: application/x-www-form-urlencoded: 窗体数据被编码为名称/值对。这是标准的编码格式。 multipart/form-data: 窗体数据被编码为一条消息,页上的每个控件对应消息中的一个部分。 text/plain: 窗体数据以纯文本形式进行编码,其中不含任何控件或格式字符。 
补充 
form的enctype属性为编码方式,常用有两种:application/x-www-form-urlencoded和multipart/form-data,默认为application/x-www-form-urlencoded。 当action为get时候,浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串(name1=value1&name2=value2…),然后把这个字串append到url后面,用?分割,加载这个新的url。 当action为post时候,浏览器把form数据封装到http body中,然后发送到server。 如果没有type=file的控件,用默认的application/x-www-form-urlencoded就可以了。 但是如果有type=file的话,就要用到multipart/form-data了。浏览器会把整个表单以控件为单位分割,并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息,并加上分割符(boundary).

npm仓库上qs的使用

var obj = qs.parse('a=c');
// 结果 parse解析 { a: 'c' }
 
var str = qs.stringify(obj);
// 结果 stringify‘加密’ 'a=c'

qs.parse('foo[bar]=baz')
// {
    foo: {
        bar: 'baz'
    }
}

 

参考1

参考2

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐