關(guān)于axios如何全局注冊(cè)淺析
前言
最近用 Vue 寫(xiě)項(xiàng)目的時(shí)候，用到 axios ，因?yàn)?axios 不能用 Vue.use() （詳細(xì)介紹可以參考這篇文章），所以在每個(gè) .vue 文件中使用 axios 時(shí)就需要 import ， .vue 文件少的話還好說(shuō)，多的話未免有點(diǎn)麻煩。
后來(lái)想了想，能不能直接把 axios 加到 Vue 的原型中，這樣就達(dá)到了全局注冊(cè)了。下面話不多說(shuō)了，來(lái)一看看詳細(xì)的介紹吧。
方法如下：
1. 首先在 main.js 中引入 axios
import Vue from 'vue'
import axios from 'axios'
//把 `axios` 加到 `Vue` 的原型中
Vue.prototype.axios = axios;
new Vue({
el: '#app',
render:h => h(App)
})
2. 在 .vue 文件中使用時(shí)，注意 axios 前要加 this
<script>
export default {
name:'app',
data(){
return{
msg:'hello'
}
},
methods:{
send(){
// 注意：因?yàn)?axios 是加到 Vue 的原型中了，所以使用 axios 方法時(shí)，前面需要加 this
this.axios.get('https://www.baidu.com*******')
.then(resp => {
console.log(resp.data)
}).catch(err => {
console.log(err);
})
}
}
}
</script>
嗯，就這樣，結(jié)果當(dāng)然是沒(méi)有問(wèn)題的啦！
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
vue watch監(jiān)聽(tīng)變量值的實(shí)時(shí)變動(dòng)示例詳解
這篇文章主要介紹了vue 監(jiān)聽(tīng)變量值的實(shí)時(shí)變動(dòng) watch,使用字符串形式的偵聽(tīng)器函數(shù),還有一種是使用函數(shù)形式的偵聽(tīng)器函數(shù),本文通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
vue?Router(v3.x)?路由傳參的三種方式場(chǎng)景分析
vue?路由傳參的使用場(chǎng)景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時(shí)，攜帶參數(shù)跳轉(zhuǎn)，傳參方式可劃分為?params?傳參和?query?傳參，而?params?傳參又可分為在?url?中顯示參數(shù)和不顯示參數(shù)兩種方式，這就是vue路由傳參的三種方式，感興趣的朋友跟隨小編一起看看吧2023-07-07
vue實(shí)現(xiàn)表格動(dòng)態(tài)嵌入折線圖的繪制代碼
這篇文章給大家介紹了vue實(shí)現(xiàn)表格動(dòng)態(tài)嵌入折線圖的繪制方法,文中有詳細(xì)完整的代碼示例攻大家參考,對(duì)大家的學(xué)習(xí)或工作有一定的參考價(jià)值,需要的朋友可以參考下2023-10-10
移動(dòng)端Vue2.x Picker的全局調(diào)用實(shí)現(xiàn)
這篇文章主要介紹了移動(dòng)端Vue2.x Picker的全局調(diào)用實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
Vue中實(shí)現(xiàn)滾動(dòng)加載與無(wú)限滾動(dòng)
本文主要介紹了Vue中實(shí)現(xiàn)滾動(dòng)加載與無(wú)限滾動(dòng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
Vue3如何根據(jù)搜索框內(nèi)容跳轉(zhuǎn)至本頁(yè)面指定位置
在開(kāi)發(fā)中我們經(jīng)常遇到這樣的需求,根據(jù)要求跳轉(zhuǎn)至本頁(yè)面指定位置,這篇文章主要給大家介紹了關(guān)于Vue3如何根據(jù)搜索框內(nèi)容跳轉(zhuǎn)至本頁(yè)面指定位置的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue?各種loader的基本配置與使用，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-01-01
最近在學(xué)習(xí)Vue教程,下面這篇文章主要給大家介紹了關(guān)于vue中api統(tǒng)一管理的那些事,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-04-04
Vue 項(xiàng)目中如何使用fullcalendar 時(shí)間段選擇插件(類似課程表格)
最近完成一個(gè)項(xiàng)目,需要選擇一個(gè)會(huì)議室,但是最好能夠通過(guò)在圖上顯示出該 會(huì)議室在某某時(shí)間段內(nèi)已經(jīng)被預(yù)定了,初看這個(gè)功能感覺(jué)很棘手,仔細(xì)分析下實(shí)現(xiàn)起來(lái)還是挺容易的,下面通過(guò)示例代碼講解Vue項(xiàng)目中使用fullcalendar時(shí)間段選擇插件,感興趣的朋友一起看看吧2024-07-07
vue3-pinia-ts項(xiàng)目中的使用示例詳解
這篇文章主要介紹了vue3-pinia-ts項(xiàng)目中的使用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08