Vue+Typescript中在Vue上掛載axios使用時(shí)報(bào)錯(cuò)問題
在vue項(xiàng)目開發(fā)過程中，為了方便在各個(gè)組件中調(diào)用axios，我們通常會(huì)在入口文件將axios掛載到vue原型身上，如下：
main.ts
import Vue from 'vue' import axios from './utils/http' Vue.prototype.$axios = axios;
這樣的話,我們?cè)诟鱾€(gè)組件中進(jìn)行請(qǐng)求時(shí)，就可以直接使用this.$axios，但是在ts中使用this.$axios進(jìn)行請(qǐng)求時(shí)，會(huì)進(jìn)行報(bào)錯(cuò),如下所示：
從圖中我們可以看出ts在Vue身上檢測(cè)不到$axios。通過
在網(wǎng)上查閱發(fā)現(xiàn)：在ts中，不識(shí)別vue下面掛$axios，不可以掛在原型鏈上。也就是說我們手動(dòng)在Vue原型身上掛載$axios,ts無法識(shí)別到。
解決方法1：手動(dòng)告訴ts忽略這里的類型檢測(cè)
雖然ts無法檢測(cè)到Vue原型身上的prototype,但是實(shí)際上我們是掛載成功的，也就是說我們是可以正常使用的，唯一需要解決的是ts的類型檢測(cè)問題，因此，我們可以指定this為any類型，這樣的話就可以避免報(bào)錯(cuò)問題。如下所示：
(this as any).$axios
.post("/api/users/login", this.ruleForm)
.then((res: {data:any}) => {}
但是使用any意味著失去了類型安全保障，并且你得不到工具的支持。
解決方法2：使用vue-axios這個(gè)包來處理這個(gè)掛載問題
我們可以通過使用vue-axios這個(gè)包來處理這個(gè)掛載問題。vue-axios 是在axios基礎(chǔ)上擴(kuò)展的插件，在Vue.prototype原型上擴(kuò)展了$http等屬性，可以更加方便的使用axios。
# 安裝 npmi axios npm i vue-axios -S # 注冊(cè) Vue.use(axios,vue-axios) # 使用 this.axios()
通過使用vue-axios包,我們可以直接使用this.axios進(jìn)行調(diào)用。
從上面我們可以看出vue-axios幫助我們實(shí)現(xiàn)了在Vue原型身上掛載axios，而且能夠被ts檢測(cè)到。這樣就完美避免了ts報(bào)錯(cuò)的問題。
說明
使用ts進(jìn)行開發(fā)的過程中，會(huì)遇到各種各樣的報(bào)錯(cuò)問題，希望記錄下來，避免下次再次踩坑，也希望幫助其他人。
總結(jié)
以上所述是小編給大家介紹的Vue+Typescript中在Vue上掛載axios使用時(shí)報(bào)錯(cuò),希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
vue.js實(shí)現(xiàn)標(biāo)簽頁切換效果
這篇文章主要介紹了vue.js實(shí)現(xiàn)標(biāo)簽頁切換效果，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
修改vue源碼實(shí)現(xiàn)動(dòng)態(tài)路由緩存的方法
這篇文章主要介紹了修改vue源碼實(shí)現(xiàn)動(dòng)態(tài)路由緩存的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
這篇文章主要介紹了vue組件編寫之todolist組件的實(shí)例講解，本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-01-01
在Vue3中實(shí)現(xiàn)子組件向父組件傳遞數(shù)據(jù)的代碼示例
Vue3作為目前最熱門的前端框架之一,以其輕量化、易用性及性能優(yōu)勢(shì)吸引了大量開發(fā)者,在開發(fā)過程中,不可避免地需要在組件之間傳遞數(shù)據(jù),本文將詳細(xì)講解在Vue3中如何實(shí)現(xiàn)子組件向父組件傳遞數(shù)據(jù),并通過具體示例代碼使概念更加清晰2024-07-07
這篇文章主要介紹了Vue3中的組件數(shù)據(jù)懶加載問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue3自定義組件之v-model實(shí)現(xiàn)父子組件雙向綁定
這篇文章主要介紹了vue3自定義組件之v-model實(shí)現(xiàn)父子組件雙向綁定方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue項(xiàng)目兼容ie11的實(shí)現(xiàn)方法
本文主要介紹了vue項(xiàng)目兼容ie11的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了vue獲取input值的三種常用寫法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue?禁止重復(fù)點(diǎn)擊發(fā)送多次請(qǐng)求的實(shí)現(xiàn)
本文主要介紹了vue?禁止重復(fù)點(diǎn)擊發(fā)送多次請(qǐng)求的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
前端vue按1920*1080設(shè)計(jì)圖的頁面適配屏幕縮放并適配4K屏詳解
最近在做一個(gè)數(shù)據(jù)可視化的項(xiàng)目,整個(gè)項(xiàng)目全是大屏展示,期間也是遇到很多問題,最令人頭疼的就是大屏的適配,下面這篇文章主要給大家介紹了前端vue按1920*1080設(shè)計(jì)圖的頁面適配屏幕縮放并適配4K屏的相關(guān)資料,需要的朋友可以參考下2022-11-11