VUE axios 发送 Form Data 格式数据请求
axios 默认是 Payload 格式数据请求,但有时候后端接收参数要求必须是 Form Data 格式的,所以我们就得进行转换。Payload 和 Form Data 的主要设置是根据请求头的 Content-Type 的值来的。
axios({
method: 'post',
url: 'http://localhost:8080/login',
data: {
username: this.loginForm.username,
password: this.loginForm.password
},
transformRequest: [
function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
ret = ret.substring(0, ret.lastIndexOf('&'));
return ret
}
],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
主要配置两个地方,transformRequest 方法进行数据格式转换, Content-Type 值改为 'application/x-www-form-urlencoded'
二、全局设置POST请求为 Form Data 格式
因为像上面那样每个请求都要配置 transformRequest 和 Content-Type 非常的麻烦,重复性代码也很丑陋,所以通常都会进行全局设置。具体代码如下
import axios from 'axios'
import qs from 'qs' // 实例对象
let instance = axios.create({
timeout: 6000,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}) // 请求拦截器
instance.interceptors.request.use(
config => {
config.data = qs.stringify(config.data) // 转为formdata数据格式
return config
},
error => Promise.error(error)
)
就是我们在封装 axios 的时候,设置请求头 Content-Type 为 application/x-www-form-urlencoded。 然后在请求拦截器中,通过 qs.stringify() 进行数据格式转换,这样每次发送的POST请求都是 Form Data 格式的数据了。 其中 qs 模块是安装 axios 模块的时候就有的,不用另行安装,通过 import 引入即可使用。
VUE axios 发送 Form Data 格式数据请求的更多相关文章
- fetch发送Form Data请求并携带cookie
今天我们来说说如何fetch发送Form Data请求并携带cookie,直接进入正题好吧,别问我今天为啥不在开始吹两句了,累到一句牛逼不想吹...... 步骤1: 设置头部,"Conten ...
- vue & modal props & form data update bug
vue & modal props & form data update bug OK <div> <BindModal :dialogBindVisible=&qu ...
- JMeter学习(三十五)使用jmeter来发送json/gzip格式数据
一.使用jmeter来发送gzip数据 有时候我们需要模拟在客户端将数据压缩后, 发送(post)到服务器端. 通常这种情况,会发生在移动终端上. 这样做的好处, 是可以节省流量. 当然, 服务器返 ...
- 使用jmeter来发送json/gzip格式数据 --------笔记
一.使用jmeter来发送gzip数据 有时候我们需要模拟在客户端将数据压缩后, 发送(post)到服务器端. 通常这种情况,会发生在移动终端上. 这样做的好处, 是可以节省流量. 当然, 服务器返 ...
- JMeter学习(三十四)使用jmeter来发送json/gzip格式数据(转载)
转载自 http://www.cnblogs.com/yangxia-test 一.使用jmeter来发送gzip数据 有时候我们需要模拟在客户端将数据压缩后, 发送(post)到服务器端. 通常这种 ...
- Vue学习记录-接口通信(数据请求)
这一篇,把前两天实践的“数据请求”部分总结一下.从最终的结果来看,配置非常的简单,使用非常的简单,也非常的灵活,同时也存在一个很头疼的问题,这个问题可以解决,但是解释不了(功力尚浅). 选型 可选项: ...
- vue axios路由跳转取消所有请求 和 防止重复请求
直接上干货 在发送第二次请求的时候如果第一次请求还未返回,则取消第一次请求,以保证后发送的请求返回的数据不会被先发送的请求覆盖. 或者是跳转路由的时候取消还未返回的请求 第一步: axios 怎么取消 ...
- vue filters中使用data中数据
vue filters中 this指向的不是vue实例,但想要获取vue实例中data中的数据,可以采用下面方法.在 beforeCreate中将vue实例赋值给全局变量app0,然后filters中 ...
- vue使用videojs控制后台m3u8数据请求
关于Video.js的使用方法就不再说了,有兴趣的请迁跃:https://videojs.com/ VideoJS中并没有stop之类控制后台数据请求的参数,只有暂停 video.pause()方法 ...
随机推荐
- 一个可遇不可求的 bug 全局变量初始化顺序问题 哈哈
这是今天下午帮同事查的一个客户端 C++ 的 bug,前人留下的谜之代码.. 具体情况是,客户端实现了有一个简单的内存池,每次申请内存的时候会把新申请到的内存信息存到一个 map 里,据说是为了检查内 ...
- OkHttp 入门篇
OkHttp是一个HTTP & HTTP2的客户端,能够用来进行Android 和 Java 开发. HTTP是现代应用的最基本的网络环境.让你的HTTP更加有效的工作能够让你的东西加载更快而 ...
- Javascript高级编程学习笔记(11)—— 垃圾回收机制
垃圾回收机制 垃圾回收机制,是保证脚本能长时间运行的重要机制 JS具有自动垃圾收集机制,也就是说执行环境会负责管理代码执行过程中使用的内存 与一些偏底层的语言(c.c++)不同,我们不需要手工地去管理 ...
- 简单登录注册实现(Java面向对象复习)
简单登录注册的实现(面向对象的复习) 需求: 设计用户类,包含用户名和密码两个属性 设计LoginDemo类设计用户登录方法 用户有三次登录机会,如果连续三次登录失败则退出程序 功能实现页面: ...
- Ehcache3开发入门简介
在高并发应用中缓存就是核心机制.最近在研究Ehcache,发现这是一个更加灵活易用的缓存框架(相对于Redis.Memcache),Ehcache更加小巧轻便.而且都有持久化机制,不用担心JVM和服务 ...
- Python模块——configparser
configparser模块 该模块适用于配置文件的格式与windows ini文件类似,可以包含一个或多个节(section),每个节可以有多个参数(键=值) 创建文件 import configp ...
- 微信开放平台创建android应用时怎么获取应用签名
之前微信开放平台中申请创建应用,没有整理,过了好久,又重新百度,今天索性整理了,以供童鞋们备用. 1.微信开发平台注册申请成开发者账号,就此略过 2.在管理中心选择创建移动应用.按照严格要求填写.上传 ...
- RC1015 cannot open include file 'atlres.h'
fatal error RC1015: cannot open include file 'atlres.h' 问题:此问题是由于rc文件没有找到 atlres.h导致的 (原因不详) 解决:工程 ...
- Java并发编程笔记之SimpleDateFormat源码分析
SimpleDateFormat 是 Java 提供的一个格式化和解析日期的工具类,日常开发中应该经常会用到,但是由于它是线程不安全的,多线程公用一个 SimpleDateFormat 实例对日期进行 ...
- [TensorFlow] Introduction to TensorFlow Datasets and Estimators
Datasets and Estimators are two key TensorFlow features you should use: Datasets: The best practice ...