国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue+Typescript中在Vue上掛載axios使用時報錯

AaronYuan / 583人閱讀

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

Vue+Typescript中在Vue上掛載axios使用時報錯

在vue項目開發(fā)過程中，為了方便在各個組件中調(diào)用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。通過
在網(wǎng)上查閱發(fā)現(xiàn)：在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基礎(chǔ)上擴展的插件，在Vue.prototype原型上擴展了$http等屬性，可以更加方便的使用axios。

# 安裝
npmi axios
npm i vue-axios -S

# 注冊
Vue.use(axios,vue-axios)

# 使用
this.axios()

通過使用vue-axios包,我們可以直接使用this.axios進行調(diào)用。

從上面我們可以看出vue-axios幫助我們實現(xiàn)了在Vue原型身上掛載axios，而且能夠被ts檢測到。這樣就完美避免了ts報錯的問題。

說明

使用ts進行開發(fā)的過程中，會遇到各種各樣的報錯問題，希望記錄下來，避免下次再次踩坑，也希望幫助其他人。

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/106483.html

相關(guān)文章

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

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

    eccozhou 評論0 收藏0

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

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

    luckyyulin 評論0 收藏0

  • 使用Vue的axios自定義header時報錯處理~

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

    ysl_unh 評論0 收藏0

  • vue項目中使用element-ui下拉框選項值為對象時報錯

    摘要：在做后臺管理時，使用了搭配，請求方法使用了插件，在使用下拉框時，因為我需要獲取選中的選項中的其他值，因此需要傳入對象。 在做后臺管理時，使用了vue搭配elementUI，請求方法使用了axios插件，在使用下拉框時，因為我需要獲取選中的選項中的其他值，因此需要傳入對象。對select下拉框的文檔沒有讀的很仔細，百度過幾篇文章，也沒有理解他們表達的意思，然后自己又去看文檔，把他的屬性看...

    Drummor 評論0 收藏0

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

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

    william 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<