成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Vue+Typescript中在Vue上掛載axios使用時(shí)報(bào)錯(cuò)

AaronYuan / 654人閱讀

摘要：也就是說我們手動(dòng)在原型身上掛載無法識(shí)別到。這樣就完美避免了報(bào)錯(cuò)的問題。說明使用進(jìn)行開發(fā)的過程中，會(huì)遇到各種各樣的報(bào)錯(cuò)問題，希望記錄下來，避免下次再次踩坑，也希望幫助其他人。

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ò)問題，希望記錄下來，避免下次再次踩坑，也希望幫助其他人。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/106483.html

相關(guān)文章

  • 貓頭鷹的深夜翻譯：從1000+JS項(xiàng)目中匯總的10個(gè)最容易出現(xiàn)的錯(cuò)誤(以及如何解決)

    摘要：常出現(xiàn)的錯(cuò)誤前十位為了可讀性，錯(cuò)誤名稱進(jìn)行了一定的簡(jiǎn)寫。讓我們深入了解每個(gè)錯(cuò)誤發(fā)生的原因以及解決方法。這個(gè)問題很容易解決。當(dāng)未捕獲的錯(cuò)誤跨越違法跨域策略的域邊界時(shí)，會(huì)發(fā)生腳本錯(cuò)誤。這是當(dāng)你在中試圖調(diào)用的方法時(shí)出現(xiàn)的錯(cuò)誤。 JavaScript常出現(xiàn)的錯(cuò)誤前十位 showImg(https://segmentfault.com/img/bV3Z1z?w=1116&h=691); 為了可讀...

    eccozhou 評(píng)論0 收藏0

  • Vue + TypeScript + Element 項(xiàng)目實(shí)踐(簡(jiǎn)潔時(shí)尚博客網(wǎng)站)及踩坑記

    摘要：前言本文講解如何在項(xiàng)目中使用來搭建并開發(fā)項(xiàng)目，并在此過程中踩過的坑。具有類型系統(tǒng)，且是的超集，在年勢(shì)頭迅猛，可謂遍地開花。年將會(huì)更加普及，能夠熟練掌握，并使用開發(fā)過項(xiàng)目，將更加成為前端開發(fā)者的優(yōu)勢(shì)。 showImg(https://segmentfault.com/img/remote/1460000018720573); 前言 本文講解如何在 Vue 項(xiàng)目中使用 TypeScript...

    luckyyulin 評(píng)論0 收藏0

  • 使用Vue的axios自定義header時(shí)報(bào)錯(cuò)處理~

    前端Axios的設(shè)置處理當(dāng) Content-Type 為 application/json 的時(shí)候，會(huì)先產(chǎn)生一個(gè) OPTION 請(qǐng)求（如 Network所示）。 可以把 Content-Type 設(shè)置為 application/x-www-form-urlencoded。設(shè)置 Auth 請(qǐng)求頭，參看官方文檔 axios.defaults.baseURL = https://api.example....

    ysl_unh 評(píng)論0 收藏0

  • vue項(xiàng)目中使用element-ui下拉框選項(xiàng)值為對(duì)象時(shí)報(bào)錯(cuò)

    摘要：在做后臺(tái)管理時(shí)，使用了搭配，請(qǐng)求方法使用了插件，在使用下拉框時(shí)，因?yàn)槲倚枰@取選中的選項(xiàng)中的其他值，因此需要傳入對(duì)象。 在做后臺(tái)管理時(shí)，使用了vue搭配elementUI，請(qǐng)求方法使用了axios插件，在使用下拉框時(shí)，因?yàn)槲倚枰@取選中的選項(xiàng)中的其他值，因此需要傳入對(duì)象。對(duì)select下拉框的文檔沒有讀的很仔細(xì)，百度過幾篇文章，也沒有理解他們表達(dá)的意思，然后自己又去看文檔，把他的屬性看...

    Drummor 評(píng)論0 收藏0

  • 快速構(gòu)建一個(gè)使用axios的vue應(yīng)用程序

    摘要：要在我們的應(yīng)用程序中顯示模擬數(shù)據(jù)，可以在元素中寫入指令用于渲染我們的列表。雖然這超出了本教程的范圍，但建議用于更大或更復(fù)雜的應(yīng)用程序。 這篇文章講述了如何快速構(gòu)建一個(gè)vue程序，并使用axios從遠(yuǎn)程獲取數(shù)據(jù)。這是原文章的直通門 通常情況下，在構(gòu)建JavaScript應(yīng)用程序時(shí)，會(huì)從遠(yuǎn)程獲取數(shù)據(jù)或使用API。我最近研究了一些公用API，發(fā)現(xiàn)有很多很酷的東西可以用在這些獲取到的數(shù)據(jù)上。 ...

    william 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<