在Vue中使用post請求,一般先要使用Vue提供的axios庫,該庫可以通過npm包管理器安裝,在Vue組件中引入后即可使用。
npm install axios
接下來,在Vue組件中引入axios庫,并發(fā)送post請求,可以使用以下代碼:
import axios from 'axios';
axios.post('url', { //請求的url和傳遞的參數(shù)
params: {
}
}).then((response) =>{ //請求成功后的回調(diào)函數(shù)
console.log(response.data)
}).catch((error) =>{ //請求失敗后的回調(diào)函數(shù)
console.log(error)
});
在上述代碼中,首先通過import導(dǎo)入了axios庫,并調(diào)用axios的post方法,傳入了請求的url和參數(shù)。在請求成功后的回調(diào)函數(shù)中,輸出了請求的返回數(shù)據(jù)。在請求失敗后的回調(diào)函數(shù)中,輸出了請求的錯誤信息。
除了上述方法外,還可以在Vue組件中使用vue-resource庫,該庫是Vue中官方推薦的發(fā)送HTTP請求的插件。可以通過npm包管理器安裝,在Vue組件中引入后即可使用。
npm install vue-resource
接下來,在Vue組件中引入vue-resource庫,并發(fā)送post請求,可以使用以下代碼:
import VueResource from 'vue-resource';
Vue.use(VueResource);
Vue.http.post('url', { //請求的url和傳遞的參數(shù)
params: {
}
}).then((response) =>{ //請求成功后的回調(diào)函數(shù)
console.log(response.body)
}).catch((error) =>{ //請求失敗后的回調(diào)函數(shù)
console.log(error)
});
在上述代碼中,首先通過import導(dǎo)入了vue-resource庫,調(diào)用了Vue.use方法將其安裝。接下來調(diào)用Vue.http.post方法發(fā)送post請求,傳入了請求的url和參數(shù)。在請求成功后的回調(diào)函數(shù)中,輸出了請求的返回數(shù)據(jù)。在請求失敗后的回調(diào)函數(shù)中,輸出了請求的錯誤信息。
需要注意的是,在使用post請求時,一般需要在請求頭中設(shè)置Content-Type為application/x-www-form-urlencoded,或者設(shè)置為application/json。具體設(shè)置代碼如下:
axios.post('url', Qs.stringify({
params1: value1,
params2: value2,
}), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
或者 'Content-Type': 'application/json'
}
})
在上述代碼中,使用了Qs庫將要傳遞的參數(shù)轉(zhuǎn)換為字符串,然后設(shè)置了請求頭的Content-Type為application/x-www-form-urlencoded或者application/json。
總之,Vue中的post請求主要是通過axios或vue-resource庫來實現(xiàn),通過傳入請求的url和參數(shù),以及設(shè)置Content-Type來發(fā)送post請求,并在請求成功或失敗后處理返回的數(shù)據(jù)或錯誤信息。