接觸vue已經(jīng)很長時間癌刽，也經(jīng)常使用axios悔叽，但是原生封裝的方法都很難滿足日程開發(fā)的需求，所以這期就寫一下axios的封裝躏升。
底部有完整代碼
1.前期準備
創(chuàng)建一個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' //引入狀態(tài)管理倉庫
import router from '@/router' //引入路由
import {
getToken
} from '@/utils/auth' //根據(jù)業(yè)務需求佃却，這個方法是用來獲取Token
2.創(chuàng)建實例
// 創(chuàng)建一個axios實例
const service = axios.create({
baseURL: 'XXXXXX', // url = base url + request url
withCredentials: true, // 當跨域請求時發(fā)送cookie
timeout: 15000 // 請求時間
})
3.請求攔截器
在發(fā)送請求之前做些什么
service.interceptors.request.use(
config => {
if (store.getters.token) {
// 讓每個請求攜帶令牌——['Has-Token']作為自定義密鑰者吁。
// 請根據(jù)實際情況修改。
config.headers['Has-Token'] = getToken()
}
//在這里根據(jù)自己相關的需求做不同請求頭的切換饲帅，我司是需要使用這兩種請求頭复凳。
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 //這是響應返回后的結果
//在這里可以根據(jù)返回的狀態(tài)碼對存在響應錯誤的請求做攔截，提前做處理灶泵。
//以下為我司的處理規(guī)則
// 如果自定義代碼不是200育八，則判斷為錯誤。
if (res.code == 200 || res.code == 300) {
// 重新登陸
MessageBox.confirm('您的登錄狀態(tài)存在問題赦邻，您可以取消以停留在此頁面髓棋，或再次登錄', '系統(tǒng)提示', {
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'
// 創(chuàng)建一個axios實例
const service = axios.create({
baseURL: 'XXXXX',
withCredentials: true,
timeout: 15000
})
service.interceptors.request.use(
config => {
if (store.getters.token) {
// 讓每個請求攜帶令牌——['Has-Token']作為自定義密鑰惶洲。
// 請根據(jù)實際情況修改按声。
config.headers['Has-Token'] = getToken()
}
//在這里根據(jù)自己相關的需求做不同請求頭的切換，我司是需要使用這兩種請求頭恬吕。
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 //這是響應返回后的結果
//在這里可以根據(jù)返回的狀態(tài)碼對存在響應錯誤的請求做攔截签则，提前做處理。
//以下為我司的處理規(guī)則
// 如果自定義代碼不是200铐料，則判斷為錯誤渐裂。
if (res.code == 200 || res.code == 300) {
// 重新登陸
MessageBox.confirm('您的登錄狀態(tài)存在問題，您可以取消以停留在此頁面钠惩，或再次登錄', '系統(tǒng)提示', {
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 站點名稱：平凡的你我。 歡迎大家的到來耘分！
