Vue 设置axios请求格式为form-data的操作步骤


Posted in Javascript onOctober 29, 2019

Cover

Vue 设置axios请求格式为form-data的操作步骤

在Vue中使用axios

这个老生常谈了,还是先记录一遍,方面后面自己查。

!!! 设置form-data请求格式直接翻到后面看。

1. 安装axios

在项目下执行npm install axios。

之后在main.js中,添加:

import axios from 'axios' //引入

//Vue.use(axios) axios不能用use 只能修改原型链 
Vue.prototype.$axios = axios

2. 发送GET请求

axios封装了get方法,传入请求地址和请求参数,就可以了,同样支持Promise。

//不带参数的get请求

let url = "..."
this.$axios.get(url)
.then((res) => {
 console.log(res) //返回的数据
})
.catch((err) => {
 console.log(err) //错误信息
})

不过它的参数需要写在params属性下,也就是:

//带参数的get请求

let url = "...getById"
this.$axios.get(url, {
 params: {
  id: 1
 }
})
.then((res) => {
 console.log(res) //返回的数据
})
.catch((err) => {
 console.log(err) //错误信息
})

2. 发送post请求

与上面相同,就是参数不需要写在params属性下了,即:

//带参数的post请求

let url = "...getById"
let data = {
 id: 1
}

this.$axios.post(url, data)
.then((res) => {
 console.log(res) //返回的数据
})
.catch((err) => {
 console.log(err) //错误信息
})

3. 经典写法

axios也可以用jQ的写法,不过回调函数还是Promise的写法,如:

this.$axios({
 method: 'post',
 url: '...',
 data: {
 firstName: 'Fred',
 lastName: 'Flintstone'
 }
}).then((res) => {
 console.log(res)
})

设置form-data请求格式

我用默认的post方法发送数据的时候发现后端获取不到数据,然而在network中看到参数是的确传出去的了。而且用postman测试的时候也是可以的,比较了下两个的不同发现是postman使用的是form-data格式,于是用form-data格式再次请求,发现OJBK

在查找设置请求格式的时候花了点时间,网上的方案有好几个,这个我亲测成功,发上来。

import axios from "axios" //引入

//设置axios为form-data
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.transformRequest = [function (data) {
 let ret = ''
 for (let it in data) {
  ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
 }
 return ret
}]


//然后再修改原型链
Vue.prototype.$axios = axios

以上这篇Vue 设置axios请求格式为form-data的操作步骤就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
Jul 26 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
浅析Node.js中的内存泄漏问题
Jun 23 Javascript
prototype.js常用函数详解
Jun 18 Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
js单线程的本质 Event Loop解析
Oct 29 #Javascript
解决axios post 后端无法接收数据的问题
Oct 29 #Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 #Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 #Javascript
vue实现路由监听和参数监听
Oct 29 #Javascript
基于axios 的responseType类型的设置方法
Oct 29 #Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
Oct 29 #Javascript
You might like
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
两种php实现图片上传的方法
2016/01/22 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
比较搞笑的js陷阱题
2010/02/07 Javascript
关闭浏览器时提示onbeforeunload事件
2013/12/25 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
AngularJS进行性能调优的7个建议
2015/12/28 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
python里将list中元素依次向前移动一位
2014/09/12 Python
粗略分析Python中的内存泄漏
2015/04/23 Python
django model去掉unique_together报错的解决方案
2016/10/18 Python
Python 闭包的使用方法
2017/09/07 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
python数据类型强制转换实例详解
2020/06/22 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
我的大学生活职业生涯规划
2014/01/02 职场文书
公司企业表扬信
2014/01/11 职场文书
个人简历求职信范文
2015/03/20 职场文书
高三教师工作总结2015
2015/07/21 职场文书
2019假期福利管理制度!
2019/07/15 职场文书