快捷導(dǎo)航

在Vue組件化中利用axios處理ajax請(qǐng)求的使用方法

更新時(shí)間：2017年08月25日 09:04:46 作者：安小下

這篇文章主要給大家介紹了在Vue組件化中利用axios處理ajax請(qǐng)求的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。

本文主要給大家介紹了關(guān)于在Vue組件化中利用axios處理ajax請(qǐng)求的使用方法，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細(xì)的介紹吧。

推薦方式

首先在 main.js 中引入 axios

// 引入 axios
import axios from 'axios'

這時(shí)候如果你想在其它的組件中使用axios進(jìn)行ajax請(qǐng)求是或提示報(bào)錯(cuò)的，報(bào)錯(cuò)內(nèi)容大致是axios is undefined。

我們通常的決絕方案是將axios改寫為 Vue 的原型屬性,如2

將axios寫入Vue的原型鏈作為Vue的屬性

// 設(shè)置axios請(qǐng)求的默認(rèn)host
axios.defaults.baseURL = "https://www.ifilm.ltd/api/"
// 將axios綁定給vue成為一個(gè)屬性
Vue.prototype.$http = axios

在其他組件中使用axios

this.$http.get('路由').then(response => {
  // todo something
  })

此方式可以類比到Vue的其他庫使用

兩種不推薦的使用示范

將axios全局化，作為全局變量

// 引入axios
import axios from 'axios'
// 將axios全局化
window.axios = axios;

另外一個(gè)不太優(yōu)雅的方式就是在需要的每個(gè)組件中都引入對(duì)應(yīng)的庫

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章:

相關(guān)文章

前端報(bào)錯(cuò)npm ERR! cb() never called!問題解決辦法
最近接手了一個(gè)前臺(tái)項(xiàng)目,執(zhí)行npm install的時(shí)候一直報(bào)錯(cuò),所以這里就給大家總結(jié)下,這篇文章主要給給大家介紹了關(guān)于前端報(bào)錯(cuò)npm?ERR! cb() never called!問題的解決辦法,需要的朋友可以參考下
2024-05-05
Vue中保存數(shù)據(jù)到磁盤文件的方法
今天小編就為大家分享一篇Vue中保存數(shù)據(jù)到磁盤文件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue.js數(shù)據(jù)響應(yīng)式原理解析
這篇文章主要介紹了vue.js數(shù)據(jù)響應(yīng)式原理解析，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下
2022-08-08
vue實(shí)現(xiàn)頂部導(dǎo)航欄以及跳轉(zhuǎn)
這篇文章主要介紹了vue實(shí)現(xiàn)頂部導(dǎo)航欄以及跳轉(zhuǎn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-09-09
Vue鼠標(biāo)點(diǎn)擊事件和鍵盤事件舉例詳解
在Vue框架中我們經(jīng)常需要綁定各種JS事件,如"點(diǎn)擊事件"、"鼠標(biāo)移動(dòng)事件"、"鍵盤事件"等等,這篇文章主要給大家介紹了關(guān)于Vue鼠標(biāo)點(diǎn)擊事件和鍵盤事件的相關(guān)資料,需要的朋友可以參考下
2024-01-01
vue將某個(gè)組件打包成js并在其他項(xiàng)目使用
這篇文章主要給大家介紹了關(guān)于vue將某個(gè)組件打包成js并在其他項(xiàng)目使用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-07-07
vue實(shí)現(xiàn)全選、反選功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)全選、反選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
解決vue過濾器filters獲取不到this對(duì)象的問題
這篇文章主要介紹了解決vue過濾器filters獲取不到this對(duì)象的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-01-01
Vue監(jiān)聽頁面變化的實(shí)現(xiàn)方法小結(jié)
在Vue.js應(yīng)用開發(fā)過程中,監(jiān)聽頁面變化是一個(gè)非常常見的需求,無論是為了響應(yīng)用戶交互、優(yōu)化性能,還是實(shí)現(xiàn)復(fù)雜的業(yè)務(wù)邏輯,監(jiān)聽頁面變化的能力都是不可或缺的,本文將詳細(xì)介紹如何在Vue項(xiàng)目中實(shí)現(xiàn)頁面變化監(jiān)聽,需要的朋友可以參考下
2024-10-10
解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效
這篇文章主要介紹了解決Antd中Form表單的onChange事件中執(zhí)行setFieldsValue不生效問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03