更新的是我csdn上的文章，需要的話可以看下，互相學習點擊去我的csdn
vue中axios的封裝
在vue項目和后端交互獲取數據時，通常使用axios庫，官方文檔：https://www.npmjs.com/package/axios。
淺談在項目中axios的簡單二次封裝
安裝
npm install axios; //安裝axios
//cnpm install axios;//或者使用鏡像下載.
引入組件
通常情況下，在項目src目錄下創建request文件夾，然后創建http.js和api.js文件。
- http.js用來二次封裝axios；
- api.js用來統一管理后端接口；
在http.js文件中
- 引入axios；
- 引入qs，用於序列化post類型的數據。
- 引入ui提示框，根據自己u進行修改；推薦elementui文檔
環境切換
在http.js的文件中的axios.defaults.baseURL可以設置axios的默認請求地址。配合不同的運行指令進行開發不同環境的數據。
另附配置vue不同環境配置不同打包命令
// 環境的切換
if (process.env.NODE_ENV == 'development') {
axios.defaults.baseURL = 'https://www.baidu.com';}
else if (process.env.NODE_ENV == 'debug') {
axios.defaults.baseURL = 'https://www.ceshi.com';
}
else if (process.env.NODE_ENV == 'production') {
axios.defaults.baseURL = 'https://www.production.com';
}
請求默認值的設置
通過axios.defaults.timeout設置默認的請求超時時間。
//設置默認的請求超時時間
axios.defaults.timeout = 10000;
設置默認請求頭和token
//設置post的請求頭
axios.defaults.headers.post['Content-Type'] = 'application/json';
//設置默認token 一般有權限不在這里設置
//axios.defaults.headers.Authorization=token;
請求攔截
token攔截
一般情況下，發送請求必須帶有token進行驗證。做權限的話這里需要注意。
axios.interceptors.request.use(
config => {
let token = localStorage.getItem("header");
if (token) { // 判斷是否存在token，如果存在的話，則每個http header都加上token
config.headers.token = `${token}`;
}
return config;
},
err => {
this.$router.push("/login")
return Promise.reject(err);
});
響應攔截
這里需要根據后端協商，根據后端返回狀態碼進行處理
axios.interceptors.response.use(function (response) {
if (response.status >= 400) {
localStorage.clear();// 刪除已經失效或過期的token（不刪除也可以，因為登錄后覆蓋）
router.replace({
path: '/login', // 到登錄頁重新獲取token
query: {
//回到當前頁面
redirect: router.currentRoute.fullPath
}
})
}
return response
}, function (error) {
if (error.response) {
if(error.response.status===403){
Message({
showClose: true,
message: '登錄過期',
type: 'error'
});
localStorage.clear();
Cookies.set("user","",-10);
router.replace({
path: '/login' // 到登錄頁重新獲取token
})
}else if(error.response.status===405){
Message({
showClose: true,
message: '權限不足,請聯系管理員',
type: 'warning'
});
router.replace({
path: '/error',
})
}else if(error.response.status===500){
Message({
showClose: true,
message: '服務器異常',
type: 'error'
});
}
}
return Promise.reject(error)
})
封裝get和post方法
axios封裝的方法有很多，比如get,post,delete,put等方法。這里簡單介紹get和post的封裝。
post
/**
* post方法，對應post請求
* @param {String} url [請求的url地址]
* @param {Object} params [請求時攜帶的參數]
*/
export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(res => {
resolve(res.data);
})
.catch(err => {
reject(err.data)
})
});
}
get
/**
* get方法，對應get請求
* @param {String} url [請求的url地址]
* @param {Object} params [請求時攜帶的參數]
*/
export function get(url, params) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
}).then(res => {
resolve(res.data);
}).catch(err => {
reject(err.data)
})
});
}
vue中api的封裝
首先在api.js中引入在http.js中封裝的get和post兩種方法。
import { get, post } from './http'
不同參數的封裝接口方法
export const Login = p => get('/api/admin/login', p);
export const Registry = p => post('/api/admin/registry', p);
//路徑參數封裝
//export const Api= p => post('/api/'+ p);
//多參數封裝
export const Api=（ p，q ）=> post('/api/'+ p+“/"+q);
頁面中使用方法
import { Login,Registry } from "@/request/api"
export default {
name:"app",
data(){
return{
message:{
uname:"",
upwd:""
}
}
},
methods:{
login(){
Login(this.message).then(res=>{
....請求成功的處理
})
}
}
}
例外附上：