在Vue中使用axios发送post请求时,可能会出现后端无法接收到参数的情况。这个问题的原因是axios默认发送的请求是json格式的,而后端接收的请求是form表单格式的,这就导致后端无法获取json格式的请求参数。解决这个问题可以通过设置axios的请求头部信息,将请求格式设置为form表单格式。
下面是Vue简单封装axios并解决post请求后端接收不到参数问题的示例代码:
- 首先安装axios和qs库:
npm install axios qs --save
- 在src目录下新建一个api文件夹,并新建一个http.js文件:
import axios from 'axios'
import qs from 'qs'
axios.defaults.baseURL = 'http://localhost:3000' // 设置请求的基础url
//添加一个请求拦截器
axios.interceptors.request.use(function(config){
//设置post请求的请求头部信息
if(config.method=='post'){
config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
config.data = qs.stringify(config.data);
}
return config;
},function(error){
return Promise.reject(error);
});
export default axios //导出axios
- 在api文件夹下新建一个users.js文件,作为示例:
import axios from './http'
export function login (params) {
return axios.post('/login', params)
}
export function getUserList () {
return axios.get('/users')
}
export function addUser (params) {
return axios.post('/users', params)
}
export function deleteUser (userId) {
return axios.delete('/users/' + userId)
}
export function updateUser (userId, params) {
return axios.put('/users/' + userId, params)
}
这样,在Vue中需要引入api文件夹下的users.js文件,然后调用对应的函数即可发送请求。对于post请求,需要将参数以对象的形式传入即可。文章来源:https://www.toymoban.com/news/detail-568749.html
// 发送post请求示例
this.$api.login({
username: 'admin',
password: '123456'
}).then(response => {
console.log(response)
}).catch(error => {
console.log(error)
})
// 发送get请求示例
this.$api.getUserList().then(response => {
console.log(response)
}).catch(error => {
console.log(error)
})
这样设置后就可以正常发送post请求了,后端也可以正确接收到参数了。文章来源地址https://www.toymoban.com/news/detail-568749.html
到了这里,关于在Vue中使用axios发送post请求时,可能会出现后端无法接收到参数的情况。的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!