這篇文章帶給大家的內容是關於Vue中使用axios請求攔截的方法介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
一、前言
axios的基礎使用就不過多的講解啦，如何使用可以看axios文檔使用說明·Axios中文說明
在這裡和大家分享一下axios攔截在實際專案中的使用
很多人都看過axios的官方文件中攔截器這一欄，有的人可能會有點懵，因為文件只告訴你有這個東西，而不告訴你在什麼情況下使用。許多初學者就會放棄使用axios攔截器，畢竟攔截器是可以不使用的，但使用攔截器，會在頁面中減少很多不必要的程式碼。
二、說在前面的
專案所使用的ui框架是iview
以下友善提示皆使用iview ui的message提示元件，例如this.$Message.xxx
/api/request 只是例子接口，實際開發用後台提供的接口。
code是後台狀態碼，我這裡也只是例子，不要問我為毛我的返回碼和你的怎麼不一樣這樣的問題哈...這些都需要和後台溝通約定的。
使用的請求標頭是：axios.defaults.headers['Content-Type']
=
'application/x-www-form-urlencoded';至於為什麼使用這個請求頭可以看看我的另外一篇文章關於axios會發送兩次請求，有個OPTIONS請求的問題
因為使用的是這個請求頭所以需要用qs模組，不然後台不認這個資料。
三、不使用請求攔截
如果不使用請求攔截，也是可以的，但是會多了非常多的程式碼，我們以登入頁為例。
##一個單純，沒有花俏的頁面，|ω・）
//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password
this.$axios.post("/api/request", this.$qs.stringify(httpRequest)).then(data => {
//特殊错误处理，状态为10时为登录超时
if(data.data.code === 10){
this.$Message.error("登录已超时，请重新登录")
this.$router.push("/login")
//其余错误状态处理
}else if(data.data.code != 0){
this.$Message.error(data.data.msg)
//请求成功
}else if(data.data.code === 0){
//进行成功业务逻辑
}
//.......
});登入後複製
如果不使用請求攔截，那麼對每一條請求每一個狀態都要特殊處理，如果請求特殊狀態有數十個，每個頁面有很多請求，那麼頁面會變得很長很臃腫，不好維護。
三、使用請求攔截
相同的請求返回代碼我們可以抽取出來，寫在請求攔截中當我們設定了攔截之後，在我們的元件程式碼中可以簡化很多，還是以登入介面為例：
在main.js中
//请求发送拦截，把数据发送给后台之前做些什么......
axios.interceptors.request.use((request) => {
//这个例子中data是loginName和password
let REQUEST_DATA = request.data
//统一进行qs模块转换
request.data = qs.stringify(REQUEST_DATA)
//再发送给后台
return request;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
//请求返回拦截，把数据返回到页面之前做些什么...
axios.interceptors.response.use((response) => {
//特殊错误处理，状态为10时为登录超时
if (response.data.code === 10) {
iView.Message.error("登录已超时，请重新登录");
router.push("/login")
//其余错误状态处理
} else if (response.data.code != 0) {
iView.Message.error(response.data.msg)
//请求成功
} else if(response.data.code === 0){
//将我们请求到的信息返回页面中请求的逻辑
return response;
}
//......
}, function (error) {
return Promise.reject(error);
});登入後複製
//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password
this.$axios.post("/api/request", httpRequest).then(data => {
//这是要先判断data，如果请求的数据状态code不为0,会被拦截，则data为undefined
if(data){
//进行请求返回成功逻辑
}
});登入後複製
登入後複製
這樣我們就對axios請求添加了攔截，可以減少很多程式碼邏輯，頁面可讀性更高，可維護性也更高
四、其他
這就是axios攔截的最基礎的用法，當然也不止於此，我們也可以進行擴展延伸，做更多的事情，只要你的業務有需求，axios攔截總能幫到你，這些就需要舉一反三，工具是死的人是活的，我可以再舉個小例子，比如設定請求簽名。
請求簽章是前台和後台約定的溝通方式，對資料進行加密，可以一定程度上保證資料的安全性
還是以這個登入頁面為例
//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password
this.$axios.post("/api/request", httpRequest).then(data => {
//这是要先判断data，如果请求的数据状态code不为0,会被拦截，则data为undefined
if(data){
//进行请求返回成功逻辑
}
});登入後複製
登入後複製
在
main.js中，我們對發送的資料進行攔截
//请求发送拦截
axios.interceptors.request.use((request) => {
//获取请求的数据，这里是loginName和password
let REQUEST_DATA = request.data
//获取请求的地址，这里是/api/request
let REQUEST_URL = request.url
//设置签名并进行qs转换，且赋值给request的data，签名函数另外封装
request.data = qs.stringify(requestDataFn(REQUEST_DATA, REQUEST_URL))
//发送请求给后台
return request;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
//已封装好的签名函数
function requestDataFn(data, method) {
let postData = {}
//时间戳，时间戳函数不作展示，也是已封装好的
postData.timestamp = getNowFormatDate();
//请求用户的session以及secretKey信息,为空是未登录，登录后我把它存在localStorage中，这个存在哪里都可以，这里只作为例子。
postData.session = localStorage.getItem('session') || '';
postData.secretKey = localStorage.getItem('secretKey') || '';
//请求的地址，这里是/api/request
postData.method = method;
//请求的数据这里是loginName和password，进行base64加密
let base64Data = Base64.encode(JSON.stringify(data));
//设置签名并进行md5加密
let signature = md5.hex(postData.secretKey + base64Data + postData.method + postData.session + postData.timestamp + postData.secretKey);
//把数据再次进行加密
postData.data = encodeURI(base64Data);
postData.signature = signature;
return postData
}登入後複製
這樣我們就完成了資料加密以及簽名，這樣再發送給後台。 #########注意：這裡只作為例子展示，如果需要用到簽名，如何簽名，是前台和後台溝通的結果!######axios請求攔截的用處遠遠不止這樣，具體如何使用，還需要在實際工作，實際專案中隨機應變啦。 ##########
以上是Vue中使用axios請求攔截的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
