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身上檢測不到$axios。通過
在網(wǎng)上查閱發(fā)現(xiàn)：在ts中，不識(shí)別vue下面掛$axios，不可以掛在原型鏈上。也就是說我們手動(dòng)在Vue原型身上掛載$axios,ts無法識(shí)別到。
解決方法1：手動(dòng)告訴ts忽略這里的類型檢測
雖然ts無法檢測到Vue原型身上的prototype,但是實(shí)際上我們是掛載成功的，也就是說我們是可以正常使用的，唯一需要解決的是ts的類型檢測問題，因此，我們可以指定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檢測到。這樣就完美避免了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)文章
如何用webpack4帶你實(shí)現(xiàn)一個(gè)vue的打包的項(xiàng)目
這篇文章主要介紹了如何用webpack4帶你實(shí)現(xiàn)一個(gè)vue的打包的項(xiàng)目，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要為大家詳細(xì)介紹了Vue中自定義指令directive的使用方法，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-04-04
這篇文章主要介紹了Vue echarts封裝的實(shí)現(xiàn)，Echarts，它是一個(gè)與框架無關(guān)的JS圖表庫，但是它基于JS，這樣很多框架都能使用它2023-01-01
這篇文章主要介紹了vuepress打包部署踩坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vite+vue3項(xiàng)目初始化搭建的實(shí)現(xiàn)步驟
本文主要介紹了vite+vue3項(xiàng)目初始化搭建的實(shí)現(xiàn)步驟,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-07-07
在vue中，我們?cè)趍ain.ts引入的全局注冊(cè)的組件是可以不需要import導(dǎo)入而直接使用的，使用的時(shí)候是自己全局注冊(cè)組件時(shí)的名稱，而不是組件名，這篇文章主要介紹了vue3中批量全局注冊(cè)組件,需要的朋友可以參考下2023-05-05
Vue 3引入了兩個(gè)新的API,ref和reactive,用于創(chuàng)建響應(yīng)式對(duì)象,這兩個(gè)方法都位于Vue.prototype上,因此可以在組件實(shí)例中直接使用,本文給大家介紹vue3使用ref和reactive的示例,感興趣的朋友跟隨小編一起看看吧2023-10-10
這篇文章主要介紹了vue數(shù)組去重的12種方法示例全面詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
Vue使用v-viewer插件實(shí)現(xiàn)圖片預(yù)覽和縮放和旋轉(zhuǎn)等功能(推薦)
v-viewer是一個(gè)基于viewerjs封裝的vue圖片預(yù)覽組件,有預(yù)覽縮放拉伸旋轉(zhuǎn)切換拖拽等功能,支持配置化，這篇文章主要介紹了Vue使用v-viewer插件實(shí)現(xiàn)圖片預(yù)覽和縮放和旋轉(zhuǎn)等功能,需要的朋友可以參考下2023-02-02
vue+elementUI顯示表格指定列合計(jì)數(shù)據(jù)方式
這篇文章主要介紹了vue+elementUI顯示表格指定列合計(jì)數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10