在Vue中使用axios發(fā)送post請求時，可能會出現(xiàn)后端無法接收到參數(shù)的情況。這個問題的原因是axios默認(rèn)發(fā)送的請求是json格式的，而后端接收的請求是form表單格式的，這就導(dǎo)致后端無法獲取json格式的請求參數(shù)。解決這個問題可以通過設(shè)置axios的請求頭部信息，將請求格式設(shè)置為form表單格式。
下面是Vue簡單封裝axios并解決post請求后端接收不到參數(shù)問題的示例代碼：
- 首先安裝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' // 設(shè)置請求的基礎(chǔ)url
//添加一個請求攔截器
axios.interceptors.request.use(function(config){
//設(shè)置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 //導(dǎo)出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文件，然后調(diào)用對應(yīng)的函數(shù)即可發(fā)送請求。對于post請求，需要將參數(shù)以對象的形式傳入即可。文章來源：http://www.zghlxwxcb.cn/news/detail-568749.html
// 發(fā)送post請求示例
this.$api.login({
username: 'admin',
password: '123456'
}).then(response => {
console.log(response)
}).catch(error => {
console.log(error)
})
// 發(fā)送get請求示例
this.$api.getUserList().then(response => {
console.log(response)
}).catch(error => {
console.log(error)
})
這樣設(shè)置后就可以正常發(fā)送post請求了，后端也可以正確接收到參數(shù)了。文章來源地址http://www.zghlxwxcb.cn/news/detail-568749.html
到了這里，關(guān)于在Vue中使用axios發(fā)送post請求時，可能會出現(xiàn)后端無法接收到參數(shù)的情況。的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
