這篇文章將為大家詳細(xì)講解有關(guān)Vue+Typescript中在Vue上掛載axios使用時(shí)報(bào)錯(cuò)怎么辦，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司專注于江陽企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè),商城網(wǎng)站制作。江陽網(wǎng)站建設(shè)公司,為江陽等地區(qū)提供建站服務(wù)。全流程按需定制制作，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

在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ò)的問題。

關(guān)于“Vue+Typescript中在Vue上掛載axios使用時(shí)報(bào)錯(cuò)怎么辦”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

新聞名稱：Vue+Typescript中在Vue上掛載axios使用時(shí)報(bào)錯(cuò)怎么辦-創(chuàng)新互聯(lián)
文章地址：http://weahome.cn/article/dhsgod.html