接觸vue已經很長時間,也經常使用axios,但是原生封裝的方法都很難滿足日程開發的需求,所以這期就寫一下axios的封裝。
底部有完整代碼
1.前期準備
創建一個js文件,命名自定。我這里定義為request.js
import axios from 'axios' //導入原生的axios
import qs from 'qs'; //導入qs,做字符串的序列化,為了后面不同的場景使用。
import {
MessageBox,
Message
} from 'element-ui' //引入element-ui的兩個組件,分別是消息框和消息提示
import store from '@/store' //引入狀態管理倉庫
import router from '@/router' //引入路由
import {
getToken
} from '@/utils/auth' //根據業務需求,這個方法是用來獲取Token
2.創建實例
// 創建一個axios實例
const service = axios.create({
baseURL: 'XXXXXX', // url = base url + request url
withCredentials: true, // 當跨域請求時發送cookie
timeout: 15000 // 請求時間
})
3.請求攔截器
在發送請求之前做些什么
service.interceptors.request.use(
config => {
if (store.getters.token) {
// 讓每個請求攜帶令牌——['Has-Token']作為自定義密鑰。
// 請根據實際情況修改。
config.headers['Has-Token'] = getToken()
}
//在這里根據自己相關的需求做不同請求頭的切換,我司是需要使用這兩種請求頭。
if (config.json) {
config.headers['Content-Type'] = 'application/json'
} else {
config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
config.data = qs.stringify(config.data); //利用qs做json序列化
}
return config
},
error => {
// 處理請求錯誤
console.log(error) // 調試
return Promise.reject(error)
}
)
4.響應攔截器
在收到相應后做些什么
service.interceptors.response.use(
response => {
const res = response.data //這是響應返回后的結果
//在這里可以根據返回的狀態碼對存在響應錯誤的請求做攔截,提前做處理。
//以下為我司的處理規則
// 如果自定義代碼不是200,則判斷為錯誤。
if (res.code == 200 || res.code == 300) {
// 重新登陸
MessageBox.confirm('您的登錄狀態存在問題,您可以取消以停留在此頁面,或再次登錄', '系統提示', {
confirmButtonText: '重新登錄',
type: 'warning'
}).then(() => {
store.dispatch('user/resetToken').then(() => {
location.reload();
})
})
return
} else {
if (res.code == 700) {
Message.warning('您沒有獲取請求的權限!')
router.replace({
path: '/401'
})
return
} else {
return res
}
}
//end
},
error => {
console.log('err' + error)
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
5.拋出實例
export default service
6.如何調用
//以我司請求為例子
import request from '@/utils/request'
export function getCity(data) {
return request({
url: '/getCity/findParentId',
method: 'post',
data
})
}
7.完整代碼
import axios from 'axios'
import qs from 'qs';
import {
MessageBox,
Message
} from 'element-ui'
import store from '@/store'
import router from '@/router'
import {
getToken
} from '@/utils/auth'
// 創建一個axios實例
const service = axios.create({
baseURL: 'XXXXX',
withCredentials: true,
timeout: 15000
})
service.interceptors.request.use(
config => {
if (store.getters.token) {
// 讓每個請求攜帶令牌——['Has-Token']作為自定義密鑰。
// 請根據實際情況修改。
config.headers['Has-Token'] = getToken()
}
//在這里根據自己相關的需求做不同請求頭的切換,我司是需要使用這兩種請求頭。
if (config.json) {
config.headers['Content-Type'] = 'application/json'
} else {
config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
config.data = qs.stringify(config.data); //利用qs做json序列化
}
return config
},
error => {
// 處理請求錯誤
console.log(error) // 調試
return Promise.reject(error)
}
)
service.interceptors.response.use(
response => {
const res = response.data //這是響應返回后的結果
//在這里可以根據返回的狀態碼對存在響應錯誤的請求做攔截,提前做處理。
//以下為我司的處理規則
// 如果自定義代碼不是200,則判斷為錯誤。
if (res.code == 200 || res.code == 300) {
// 重新登陸
MessageBox.confirm('您的登錄狀態存在問題,您可以取消以停留在此頁面,或再次登錄', '系統提示', {
confirmButtonText: '重新登錄',
type: 'warning'
}).then(() => {
store.dispatch('user/resetToken').then(() => {
location.reload();
})
})
return
} else {
if (res.code == 700) {
Message.warning('您沒有獲取請求的權限!')
router.replace({
path: '/401'
})
return
} else {
return res
}
}
//end
},
error => {
console.log('err' + error)
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)
export default service
下期編寫一些簡單且常用的正則驗證方法。共勉!
- 本人博客地址:https://reinness.com 站點名稱:平凡的你我。 歡迎大家的到來!