這篇文章主要介紹了Vue+Typescript中在Vue上掛載axios使用時報錯問題,本文給大家介紹的非常詳細,具有一定的參考借鑑價值 ,需要的朋友可以參考下
在vue
項目開發過程中,爲了方便在各個組件中調用axios
,我們通常會在入口文件將axios掛載到vue原型身上,如下:
main.ts
import Vue from 'vue' import axios from './utils/http' Vue.prototype.$axios = axios;
這樣的話,我們在各個組件中進行請求時,就可以直接使用this.$axios
,但是在ts中使用this.$axios
進行請求時,會進行報錯,如下所示:
從圖中我們可以看出ts在Vue身上檢測不到$axios。通過
在網上查閱發現:在ts中,不識別vue下面掛$axios,不可以掛在原型鏈上。也就是說我們手動在Vue原型身上掛載$axios,ts無法識別到。
解決方法1:手動告訴ts忽略這裏的類型檢測
雖然ts無法檢測到Vue原型身上的prototype
,但是實際上我們是掛載成功的,也就是說我們是可以正常使用的,唯一需要解決的是ts的類型檢測問題,因此,我們可以指定this爲any
類型,這樣的話就可以避免報錯問題。如下所示:
(this as any).$axios .post("/api/users/login", this.ruleForm) .then((res: {data:any}) => {}
但是使用any
意味着失去了類型安全保障,並且你得不到工具的支持。
解決方法2:使用vue-axios
這個包來處理這個掛載問題
我們可以通過使用vue-axios
這個包來處理這個掛載問題。vue-axios 是在axios基礎上擴展的插件,在Vue.prototype原型上擴展了$http等屬性,可以更加方便的使用axios。
# 安裝 npmi axios npm i vue-axios -S # 註冊 Vue.use(axios,vue-axios) # 使用 this.axios()
通過使用vue-axios
包,我們可以直接使用this.axios
進行調用。
從上面我們可以看出vue-axios
幫助我們實現了在Vue
原型身上掛載axios
,而且能夠被ts檢測到。這樣就完美避免了ts報錯的問題。
說明
使用ts進行開發的過程中,會遇到各種各樣的報錯問題,希望記錄下來,避免下次再次踩坑,也希望幫助其他人。
總結
以上所述是小編給大家介紹的Vue+Typescript中在Vue上掛載axios使用時報錯,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對神馬文庫網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請註明出處,謝謝!