在Vue中使用axios发送post请求时，可能会出现后端无法接收到参数的情况。

在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请求，需要将参数以对象的形式传入即可。

// 发送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请求了，后端也可以正确接收到参数了。

在Vue中使用axios发送post请求时，可能会出现后端无法接收到参数的情况。

猜你喜欢