vue中如何簡單封裝axios淺析
把axios注入到Vue中
import axios from 'axios'; Vue.prototype.$axios = axios;
import axios from 'axios'
axios.defaults.timeout = 5000; //響應時間
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; //配置請求頭
axios.defaults.withCredentials= true; //帶cookie
axios.defaults.baseURL = 'http://localhost:8080/'; //配置接口地址
//POST傳參序列化(添加請求攔截器)
axios.interceptors.request.use((config) => {
//在這里可以添加序列化代碼,根據(jù)后端而定,我用的SSM后端接受Json對象,假如需要序列化可以用qs組件
return config;
},(error) =>{
console.log('錯誤的傳參')
return Promise.reject(error);
});
//返回狀態(tài)判斷(添加響應攔截器)
axios.interceptors.response.use((res) =>{
//對響應數(shù)據(jù)做些事
if(!res.data.success){
return Promise.resolve(res);
}
return res;
}, (error) => {
console.log('網(wǎng)絡異常')
return Promise.reject(error);
});
//返回一個Promise(發(fā)送post請求)
export function fetchPost(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(response => {
resolve(response);
}, err => {
reject(err);
})
.catch((error) => {
reject(error)
})
})
}
返回一個Promise(發(fā)送get請求)
export function fetchGet(url, param) {
return new Promise((resolve, reject) => {
axios.get(url, {params: param})
.then(response => {
resolve(response)
}, err => {
reject(err)
})
.catch((error) => {
reject(error)
})
})
}
export default {
fetchPost,
fetchGet,
}
簡單測試:
loginPost: function() {
let params = {
'password': '123',
'username': 'admin'
}
http.fetchPost('/login', params).then((data) => {
console.log(data)
}).catch(err => {
console.log(err)
})
},
hello: function() {
http.fetchGet('/hello', "").then((data) => {
console.log(data)
}).catch(err => {
console.log(err)
})
},
post請求:

get請求:

跨域問題,這里是在后端配置的:
在SpringMVC.xml中配置跨域:
<!-- 接口跨域配置 -->
<mvc:cors>
<!-- allowed-methods="*" --> <!-- 表示所有請求都有效 -->
<mvc:mapping path="/**" allowed-origins="*"
allowed-methods="POST, GET, OPTIONS, DELETE, PUT"
allowed-headers="Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
allow-credentials="true"/>
</mvc:cors><!-- 接口跨域配置 -->
接口配置:

在Vue中配置 創(chuàng)建一個vue.config.js:

module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://127.0.0.1:8080',
// 在本地會創(chuàng)建一個虛擬服務端,然后發(fā)送請求的數(shù)據(jù),并同時接收請求的數(shù)據(jù),這樣服務端和服務端進行數(shù)據(jù)的交互就不會有跨域問題
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
// 替換target中的請求地址,也就是說以后你在請求http://api.jisuapi.com/XXXXX這個地址的時候直接寫成/api即可
}
}
}
}
}
后端也能正常獲取cookie。

當然要注意下面這個配置,這個是帶cookie的原因
axios.defaults.withCredentials= true;
總結(jié)
到此這篇關于vue中如何簡單封裝axios的文章就介紹到這了,更多相關vue封裝axios內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Vue CLI項目 axios模塊前后端交互的使用(類似ajax提交)
這篇文章主要介紹了Vue-CLI項目-axios模塊前后端交互的使用詳解(類似ajax提交),本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
Vue3中的defineExpose函數(shù)用法深入解析
這篇文章主要介紹了Vue3中的defineExpose函數(shù)用法的相關資料,defineExpose是Vue3中用于在模式下暴露組件內(nèi)部屬性和方法的輔助函數(shù),它允許父組件通過ref訪問子組件的暴露內(nèi)容,提高組件間的交互能力并保持封裝性,需要的朋友可以參考下2025-01-01
用Axios Element實現(xiàn)全局的請求loading的方法
本篇文章主要介紹了用Axios Element實現(xiàn)全局的請求loading的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
vscode中vue代碼提示與補全沒反應解決(vetur問題)
這篇文章主要給大家介紹了關于vscode中vue代碼提示與補全沒反應解決(vetur問題)的相關資料,文中通過圖文將解決的方法介紹的非常詳細,需要的朋友可以參考下2023-03-03
Vue自定義指令上報Google Analytics事件統(tǒng)計的方法
我們經(jīng)常需要接入統(tǒng)計服務以方便運營,這篇文章主要介紹了Vue自定義指令上報Google Analytics事件統(tǒng)計的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
vue事件監(jiān)聽函數(shù)on中的this指針域使用
這篇文章主要介紹了vue事件監(jiān)聽函數(shù)on中的this指針域使用方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08

