axios post请求

有关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'
}
}

axios post请求相关推荐

@async 没有异步_扒一扒VueCLI3.0中Axios异步请求同步化
前台经常会遇到请求同步和异步的问题,今天咱们来聊一聊vue中同步请求和异步请求那些事儿. 说到接口的请求同步和异步问题,最早接触Ajax中就存在,Ajax传递的参数有一个async,默认情况下是fal ...
[vue] 如果将axios异步请求同步化处理？
[vue] 如果将axios异步请求同步化处理? // 统一处理axios请求async getHistoryData (data) {try {let res = await axios.get(' ...
php使用axios发送请求,axios源码之模拟实现axios发送请求
axios内部运作流程大致如下axios入口- ->axios构造函数- ->interceptors请求拦截器- ->dispatchRequest方法- ->transfo ...
vue应用axios.get请求的代码格式（2种）- 代码篇
vue应用axios.get请求的代码格式(2种)- 代码篇代码: axios.get(this.serverPath+'/supermarket/fruits/options?id='+id, { ...
axios.delete()请求方式（含代码）- 应用篇
axios.delete() 请求的应用 - 代码篇代码如下: axios.delete(this.serverPath+'/auth/logout', {params: {// 'username ...
vue中Axios网络请求之Vue知识点归纳(十)
本文描述 vue 中 Axios 简述 vue 中使用 Axios 发起 get 请求 vue 中使用 Axios 发起 post 请求 1 简述 Axios是一个基于Promise(ES6中用于处理 ...
[Axios] axios的请求合并以及参数配置
axios的请求合并以及参数配置参考简书1 参考简书2 并发请求 – 处理并发请求的助手函数 axios.all(iterable) – iterable是一个可以迭代的参数如数组等 let sen ...
axios.post请求出错：Request header field content-type is not allowed by Access-Control-Allow-Headers in……
axios.post请求出错:Request header field content-type is not allowed by Access-Control-Allow-Headers in-- ...
vue 同步加载_vue axios同步请求解决方案
在vue项目里面,需要循环发送ajax请求,出现的问题就是循环结束,第一次服务器还没返回,导致数据处理错误,需要使用同步请求目前没有发现axios可以同步请求,所以只能使用jQuery,配置同步请求 ...
vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete)...
vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete) 手把手式笔记 Axios配置安装 axios ...

axios post请求

axios post请求相关推荐

最新文章

热门文章