溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了封裝axios+promise通用請求函數的方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
import axios from "axios";
import baseUrl from "../../setBaseUrl";
axios.defaults.baseURL = baseUrl;
import { Loading, Message } from "element-ui";
const loadingOptions = {
lock: true,
text: "拼命加載中",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)"
};
if (localStorage.token) {
axios.defaults.headers.common["x-token"] = localStorage.token;
}
const Http = {
get: function(url: string, data: any, isLoading: boolean) {
if (localStorage.token) {
axios.defaults.headers.common["x-token"] = localStorage.token;
}
let loading: any;
if (isLoading) {
loading = Loading.service(loadingOptions);
}
return new Promise<any>((resolve, reject) => {
axios
.get(url, { params: data })
.then(function(res) {
if (isLoading) {
loading.close();
}
if (res.data.code === 200) {
resolve(res.data.data);
} else {
// console.warn("Http error Info ===> ", res.data);
reject(res.data.message);
}
})
.catch(function(err) {
if (isLoading) {
loading.close();
}
// console.warn("Http error Info ===> ", err);
Message({
message: err.message,
type: "error",
duration: 2500,
showClose: true
});
});
}).catch(function(err) {
Message({
message: err,
type: "error",
duration: 2500,
showClose: true
});
});
},
post: function(url: string, data: any, isLoading: boolean) {
if (localStorage.token) {
axios.defaults.headers.common["x-token"] = localStorage.token;
}
let loading: any;
if (isLoading) {
loading = Loading.service(loadingOptions);
}
return new Promise<any>((resolve, reject) => {
axios
.post(url, data)
.then(function(res) {
if (isLoading) {
loading.close();
}
if (res.data.code === 200) {
resolve(res.data.data);
} else {
reject(res.data.message);
}
})
.catch(function(err) {
if (isLoading) {
loading.close();
}
// console.warn("Http error Info===>", err);
Message({
message: err.message,
type: "error",
duration: 2500,
showClose: true
});
});
}).catch(function(err) {
Message({
message: err,
type: "error",
duration: 2500,
showClose: true
});
});
},
put: function(url: string, data: any, isLoading: boolean) {
if (localStorage.token) {
axios.defaults.headers.common["x-token"] = localStorage.token;
}
let loading: any;
if (isLoading) {
loading = Loading.service(loadingOptions);
}
return new Promise<any>((resolve, reject) => {
axios
.put(url, data)
.then(function(res) {
if (isLoading) {
loading.close();
}
if (res.data.code === 200) {
resolve(res.data.data);
} else {
reject(res.data.message);
}
})
.catch(function(err) {
if (isLoading) {
loading.close();
}
// console.warn("Http error Info===>", err);
Message({
message: err.message,
type: "error",
duration: 2500,
showClose: true
});
});
}).catch(function(err) {
Message({
message: err,
type: "error",
duration: 2500,
showClose: true
});
});
},
delete: function(url: string, data: any, isLoading: boolean) {
if (localStorage.token) {
axios.defaults.headers.common["x-token"] = localStorage.token;
}
let loading: any;
if (isLoading) {
loading = Loading.service(loadingOptions);
}
return new Promise<any>((resolve, reject) => {
axios
.delete(url, data)
.then(function(res) {
if (isLoading) {
loading.close();
}
if (res.data.code === 200) {
resolve(res.data.data);
} else {
reject(res.data.message);
}
})
.catch(function(err) {
if (isLoading) {
loading.close();
}
// console.warn("Http error Info===>", err);
Message({
message: err.message,
type: "error",
duration: 2500,
showClose: true
});
});
}).catch(function(err) {
Message({
message: err,
type: "error",
duration: 2500,
showClose: true
});
});
}
};
export default Http;補充知識：vuex刷新頁面是store被更新，如何解決數據備份？
我用的方法很簡單，在App.vue中的生命周期函數created中，監聽頁面刷新，在頁面刷新的時候，將store的數據及時存儲在sessionStorage中，然后刷新完畢后就可以將sessionStorage中的數據再取出來用
created () { //頁面刷新store數據備份
if (localStorage.cmstoken) {
this.$router.replace("/data");
}else {
this.$router.replace("/");
}
if (sessionStorage.getItem("store") ) { //在頁面加載時讀取sessionStorage里的狀態信息
this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
}
window.addEventListener("beforeunload",()=>{ //在頁面刷新時將vuex里的信息保存到sessionStorage里
sessionStorage.setItem("store",JSON.stringify(this.$store.state))
})
},感謝你能夠認真閱讀完這篇文章，希望小編分享封裝axios+promise通用請求函數的方法內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
