Vue中的請(qǐng)求攔截器和響應(yīng)攔截器用法及說(shuō)明
vue請(qǐng)求攔截器和響應(yīng)攔截器用法
今天就講一下什么是請(qǐng)求攔截器,和請(qǐng)求攔截器的作用,好了,多余的話(huà)我就不說(shuō)了,馬上開(kāi)始今天的講解
開(kāi)始啦
請(qǐng)求攔截器
請(qǐng)求攔截器的作用是:
在請(qǐng)求發(fā)送前進(jìn)行一些操作,例如在每個(gè)請(qǐng)求體里面加上token
,統(tǒng)一做了處理的,如果要更改也是非常的容易。
關(guān)于攔截
這里只說(shuō)原理,前端的請(qǐng)求,最終離不開(kāi)Ajax,像Vue的Vue-Resource
、Axios,都只是對(duì)Ajax進(jìn)行了統(tǒng)一的封裝,它暴露出來(lái)的攔截器,其實(shí)就是寫(xiě)了一個(gè)方法,把Ajax寫(xiě)在這個(gè)方法里面(我們先說(shuō)請(qǐng)求攔截器),在執(zhí)行的時(shí)候,先將請(qǐng)求時(shí)要添加給請(qǐng)求頭的那些數(shù)據(jù)(Token、后端要的加密的密碼)先執(zhí)行一遍,都賦值給一個(gè)變量,然后再統(tǒng)一傳給Ajax,接下來(lái),就是執(zhí)行Ajax,這就是所謂的請(qǐng)求攔截器,其實(shí)就是先執(zhí)行要添加的數(shù)據(jù),然后再執(zhí)行Ajax,如果把這個(gè)添加數(shù)據(jù)的過(guò)程抽出來(lái),就成了所謂的請(qǐng)求攔截器了
// 請(qǐng)求超時(shí)時(shí)間 axios.defaults.timeout = 120000 // 添加請(qǐng)求攔截器 axios.interceptors.request.use( config => { // 在發(fā)送請(qǐng)求之前做些什么 // 判斷是否存在token,如果存在將每個(gè)頁(yè)面header都添加token if (window.sessionStorage.getItem('DT')) { // 請(qǐng)求頭配置全局token config.headers.DT = window.sessionStorage.getItem('DT') } return config }, err => { // 對(duì)請(qǐng)求錯(cuò)誤做些什么 Vue.prototype.$message.error('請(qǐng)求超時(shí)') return Promise.reject(err) } )
響應(yīng)攔截器
響應(yīng)攔截器的作用就是
在接收到響應(yīng)后再進(jìn)行一些操作,例如在服務(wù)器返回登錄狀態(tài)失效的時(shí)候,需要重登錄,跳轉(zhuǎn)到登錄頁(yè)面,
響應(yīng)攔截器,就是是在請(qǐng)求結(jié)果的返回后的同時(shí),先不直接導(dǎo)出,而是先對(duì)響應(yīng)碼等等的進(jìn)行處理,處理好之后再導(dǎo)出給頁(yè)面,如果將這個(gè)對(duì)象響應(yīng)碼的處理過(guò)程抽出來(lái),就成了所謂的響應(yīng)攔截器
代碼如下
// 響應(yīng)攔截器 axios.interceptors.response.use( response => { // res是響應(yīng)的結(jié)果 switch (response.data.code) { case 401: // 登錄失效 // 響應(yīng)成功的攔截 console.log('響應(yīng)攔截器:') // console.log(response.data) Vue.prototype.$message.error(response.data.message) sessionStorage.removeItem('DT') router.push('/login') break case 404: if (response.data.message !== null) { Vue.prototype.$message.error(response.data.message) } else { Vue.prototype.$message.error('未知錯(cuò)誤') } break case 500: // 錯(cuò)誤 if (response.data.message !== null) { Vue.prototype.$message.error(response.data.message) } else { Vue.prototype.$message.error('未知錯(cuò)誤') } break default: return response } return response }, err => { if (err.response.data.message) { Vue.prototype.$message.error(err.response.data.message) return Promise.reject(err.response.data.message) // 返回接口返回的錯(cuò)誤信息 } else { // 返回狀態(tài)碼不為200時(shí)候的錯(cuò)誤處理 Vue.prototype.$message.error(err.toString()) return Promise.resolve(err) } } )
頁(yè)面中請(qǐng)求接口時(shí):
// 用戶(hù)登錄提交 login() { // debugger this.$refs.loginFormRef.validate(async valid => { if (!valid) return if (valid) {const userInfo = { username: this.loginForm.username, password: this.loginForm.password } // 登錄之前去除token window.sessionStorage.removeItem('DT') const { data: res } = await this.$http.post('/system/login', userInfo) if (res.code !== 200) { this.initCaptcha() return } this.$message.success('登錄成功') window.sessionStorage.setItem('DT', res.result.token) this.$router.push('/main') } }) }
心得:
- 請(qǐng)求攔截器:其實(shí)就是先執(zhí)行要添加的數(shù)據(jù),然后再執(zhí)行Ajax,如果把這個(gè)添加數(shù)據(jù)的過(guò)程抽出來(lái),就成了所謂的請(qǐng)求攔截器了
- 響應(yīng)攔截器:就是是在請(qǐng)求結(jié)果的返回后的同時(shí),先不直接導(dǎo)出,而是先對(duì)響應(yīng)碼等等的進(jìn)行處理,處理好之后再導(dǎo)出給頁(yè)面,如果將這個(gè)對(duì)象響應(yīng)碼的處理過(guò)程抽出來(lái),就成了所謂的響應(yīng)攔截器
使用axios請(qǐng)求攔截器和響應(yīng)攔截器
在使用一些前后端會(huì)話(huà)時(shí),需要在請(qǐng)求頭中攜帶一些特殊請(qǐng)求頭,這樣,就需要設(shè)置請(qǐng)求攔截器和響應(yīng)攔截器
開(kāi)發(fā)項(xiàng)目時(shí),由于后端使用了token令牌,登錄后在前端保存,然后每次請(qǐng)求都要攜帶token,將這些配置寫(xiě)在main.js文件中是很亂的不易于閱讀,額外配置了axios請(qǐng)求配置模塊 這樣在以后對(duì)于請(qǐng)求響應(yīng)都能更好的配置而不會(huì)影響其他配置
如果不使用請(qǐng)求攔截,那么對(duì)每一條請(qǐng)求每一個(gè)狀態(tài)都要特殊處理,如果請(qǐng)求特殊狀態(tài)有數(shù)十個(gè),每個(gè)頁(yè)面有很多請(qǐng)求,那么頁(yè)面會(huì)變得很長(zhǎng)很臃腫,不好維護(hù)。
如何使用?
1.在utils文件夾中創(chuàng)建 一個(gè)request.js文件
文件內(nèi)容為(這里必須export這個(gè)配置后,才能被):
const service = axios.create({ timeout: 6000 //請(qǐng)求超時(shí)為6秒 }); //創(chuàng)建一個(gè)axios, 命名為service
2.先寫(xiě)請(qǐng)求攔截器的邏輯代碼
//請(qǐng)求攔截器 service.interceptors.request.use(function(config) { // 處理請(qǐng)求之前的配置 //在請(qǐng)求頭headers加入token校驗(yàn) config.headers["token"] = "aded434088c7bcc595ec1c36c24aea1c" return config }, function(error) { // 請(qǐng)求失敗的處理 return Promise.reject(error); });
3.接著寫(xiě)響應(yīng)攔截器的邏輯代碼
service.interceptors.response.use(function (response) { // 在接收響應(yīng)做些什么,例如跳轉(zhuǎn)到登錄頁(yè) ...... return response; }, function (error) { // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么 return Promise.reject(error); });
4.在統(tǒng)一管理的接口文件api.js使用
5.移除攔截器的方法
axios.interceptors.request.eject(service); //service為第一步中創(chuàng)建的axios
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue中el-table和jsplumb實(shí)現(xiàn)連線(xiàn)功能
本文主要介紹了el-table和jsplumb實(shí)現(xiàn)連線(xiàn)功能,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07最細(xì)致的vue.js基礎(chǔ)語(yǔ)法 值得收藏!
這篇文章主要為大家推薦了一篇值得收藏和學(xué)習(xí)的vue.js最細(xì)致的基礎(chǔ)語(yǔ)法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11關(guān)于移動(dòng)端與大屏幕自適應(yīng)適配方案
這篇文章主要介紹了關(guān)于移動(dòng)端與大屏幕自適應(yīng)適配方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10vue 父組件通過(guò)v-model接收子組件的值的代碼
這篇文章主要介紹了vue 父組件通過(guò)v-model接收子組件的值的代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10Vue+Element實(shí)現(xiàn)表格編輯、刪除、以及新增行的最優(yōu)方法
這篇文章主要為大家詳細(xì)介紹了Vue+Element實(shí)現(xiàn)表格的編輯、刪除、以及新增行的最優(yōu)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-05-05AntV+Vue實(shí)現(xiàn)導(dǎo)出圖片功能
AntV?組織圖操作完畢以后,需要點(diǎn)擊按鈕將畫(huà)布以圖片的形式導(dǎo)出,這篇文章主要介紹了AntV結(jié)合Vue實(shí)現(xiàn)導(dǎo)出圖片功能,需要的朋友可以參考下2023-01-01基于vue實(shí)現(xiàn)簡(jiǎn)易打地鼠游戲
這篇文章主要為大家詳細(xì)介紹了基于vue實(shí)現(xiàn)簡(jiǎn)易打地鼠游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08記一次用ts+vuecli4重構(gòu)項(xiàng)目的實(shí)現(xiàn)
這篇文章主要介紹了記一次用ts+vuecli4重構(gòu)項(xiàng)目的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05