Vue使用axios，设置axios请求格式为form-data

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

!!! 设置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) //错误信息
})

发送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) //错误信息
})

经典写法

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，设置axios请求格式为form-data相关推荐

vue分页单位设置为中文格式
根据我搭建前端项目时遇到的问题做一个记录,我下载了一个vue-element-admin前端项目demo,但是默认情况下此demo分页展示时为如下图所示: 遇到此种情况想要调整为中文显示时,如下中文显 ...
vue axios POST请求中参数以form data和request payload形式的原因
HTTP请求中,如果是get请求,那么表单参数以name=value&name1=value1的形式附到url的后面,如果是post请求,那么表单参数是在请求体中,也是以name=value& ...
获取referer中的请求参数_Servlet获取AJAX POST请求中参数以form data和request payload形式传输的方法...
本文实例讲述了Servlet获取AJAX POST请求中参数以form data和request payload形式传输的方法.分享给大家供大家参考,具体如下: HTTP请求中,如果是get请求,那么 ...
AJAX POST请求中參数以form data和request payload形式在servlet中的获取方式
HTTP请求中,假设是get请求,那么表单參数以name=value&name1=value1的形式附到url的后面,假设是post请求,那么表单參数是在请求体中,也是以name=value& ...
axios 登录后设置header,vue+axios 全局添加请求头和参数操作
vue+axios 全局添加请求头和参数操作走登录的接口都会返回一个 token 值, 然后存起来方便之后调接口的时候给后台传过去, 传给后台的方式有两种:(具体使用哪种需要和后台商量) 1, 放在 ...
vue ajax如何设置同步,vue axios同步请求解决方案
在vue项目里面,需要循环发送ajax请求,出现的问题就是循环结束,第一次服务器还没返回,导致数据处理错误,需要使用同步请求解决方案目前没有发现axios可以同步请求,所以只能使用jQuery,配 ...
vue中使用axios跨域请求
vue中使用axios请求API或其他域名地址时,会产生跨域请求问题,应该如何解决呢?(本文以请求API为例) 解决方法: 1.为axios设置请求头.拦截器等,这里直接对axios进行封装,将其封装 ...
Vue axios 发送 FormData 请求
一.简介 axios 默认是 Payload 格式数据请求,但有时候后端接收参数要求必须是 Form Data 格式的,所以我们就得进行转换. Payload 和 Form Data 的主要设置是根据 ...
Vue之axios发送Ajax请求
2.10 axios发送ajax请求 axios github 2.10.1 准备工程创建一个django工程,例如 login.创建完成之后,再创建一个子应用,例如users.最后再设置一下模板文 ...

Vue使用axios，设置axios请求格式为form-data

Vue使用axios，设置axios请求格式为form-data

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

1. 安装axios

2. 发送GET请求

设置form-data请求格式

Vue使用axios，设置axios请求格式为form-data相关推荐

最新文章

热门文章