axios vue 表单验证_VUE axios 发送 Form Data 格式数据请求

axios 默认是 Payload 格式数据请求，但有时候后端接收参数要求必须是 Form Data 格式的，所以我们就得进行转换。Payload 和 Form Data 的主要设置是根据请求头的 Content-Type 的值来的。

Payload   　　   Content-Type: 'application/json; charset=utf-8'

Form Data　　  Content-Type: 'application/x-www-form-urlencoded'

一、设置单个的POST请求为 Form Data 格式

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 引入即可使用。

fetch发送Form Data请求并携带cookie

今天我们来说说如何fetch发送Form Data请求并携带cookie,直接进入正题好吧,别问我今天为啥不在开始吹两句了,累到一句牛逼不想吹...... 步骤1: 设置头部,"Conten ...

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()方法 ...

十、Vue：Vuex实现data(){}内数据多个组件间共享

一.概述 官方文档:https://vuex.vuejs.org/zh/installation.html 1.1vuex有什么用 Vuex:实现data(){}内数据多个组件间共享一种解决方案(类似 ...

随机推荐

mysql 数据库字符串替换

UPDATE `table_name` SET `field_name` = replace (`field_name`,'from_str','to_str') WHERE `field_name` ...

jquery.cookie.js 的配置

一个轻量级的cookie 插件,可以读取.写入.删除 cookie. jquery.cookie.js 的配置 首先包含jQuery的库文件,在后面包含 jquery.cookie.js 的库文件. ...

jsp中${}

jsp中${}----是EL表达式的常规表示方式目的是为了获取{}中指定的对象(参数.对象等)的值 如:${user.name}<====>User user = (User)reques ...

Mego开发文档 - 数据注释建模

数据注释建模 Mego框架使用一组约定来基于CLR类来构建模型.您可以指定其他配置来补充或覆盖通过约定发现的内容. 在 Mego 中所有的数据对象必须要有主键.这里需要声明与EF不同的是框架只支持数据 ...

ajax获得后台传来的一个json值，在js中获得其中的属性值

首先 ajax的dataType需要设置为json, 默认的text获取属性值在jquery3.2.1中尝试不成功 获得属性值的方式: 类似数组,键值对的方式 下面例子: 设置dataType为jso ...

Web大前端面试题-Day12

1.前端需要注意哪些SEO? 合理的title.description.keywords: 搜索对着三项的权重逐个减小, title值强调重点即可, 重要关键词出现不要超过2次, 而且要靠前, 不同页 ...

ThreadLocal(一)：Thread 、ThreadLocal、ThreadLocalMap

一.ThreadLocalMap是ThreadLocal的内部类.Thread持有ThreadLocalMap的引用 Entry类继承了WeakReference

PHP安全之Web攻击&lpar;转&rpar;

一.SQL注入攻击(SQL Injection) 攻击者把SQL命令插入到Web表单的输入域或页面请求的字符串,欺骗服务器执行恶意的SQL命令.在某些表单中,用户输入的内容直接用来构造(或者影响)动态 ...

Android使用动态代理搭建网络模块框架

1.Java中的动态代理相信大多数朋友都接触过,在此就不再赘述,如果有不明白的朋友,可以到网上搜一下(一搜一大堆,呵呵..) 2.本节主要阐述一下如何使用动态代理框架实现Android应用的瘦身开发. ...

learning docker steps&lpar;6&rpar; ----- docker 镜像加速

http://www.docker-cn.com/registry-mirror 通过 Docker 官方镜像加速,中国区用户能够快速访问最流行的 Docker 镜像.该镜像托管于中国大陆,本地用户现 ...