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 相关文章推荐
Knockoutjs的环境搭建教程
Nov 26 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
Dec 08 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
vue实现打印功能的两种方法
Sep 07 Javascript
详解Vue 全局变量,局部变量
Apr 17 Javascript
React路由鉴权的实现方法
Sep 05 Javascript
vue源码中的检测方法的实现
Sep 26 Javascript
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
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python中将阿拉伯数字转换成中文的实现代码
2011/05/19 Python
Python输出各行命令详解
2018/02/01 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
使用python的pandas库读取csv文件保存至mysql数据库
2018/08/20 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
建筑专业自我鉴定
2013/10/22 职场文书
上课打牌的检讨书
2014/02/15 职场文书
教师产假请假条
2014/04/10 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
刑事起诉书范文
2015/05/19 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android