VUE使用axios調(diào)用后臺(tái)API接口的方法
引言
Vue (讀音 /vjuː/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫(kù)只關(guān)注視圖層，方便與第三方庫(kù)或既有項(xiàng)目整合。我們都知道VUE更多是注重前段用戶界面的渲染合操作，但是如果想到實(shí)現(xiàn)前后端之間的交互調(diào)用后臺(tái)API，就需要借助其他組件，如今天要講到的Axios，下邊就重點(diǎn)講解axios在vue中的使用。
Axios，基于 Promise 的 HTTP 客戶端，可以工作于瀏覽器中，也可以在 node.js 中使用。
功能：
- 從瀏覽器中創(chuàng)建 XMLHttpRequest
- 從 node.js 中創(chuàng)建 http 請(qǐng)求
- 支持 Promise API
- 攔截請(qǐng)求和響應(yīng)
- 轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)
- 取消請(qǐng)求
- 自動(dòng)轉(zhuǎn)換 JSON 數(shù)據(jù)
- 客戶端支持防止 XSRF 攻擊
1.安裝axios
cnpm i axios -S
2.方案一：修改原型鏈
首先，在main.js中引入
在這個(gè)時(shí)候，你還是無(wú)法在組件中使用axios的，但如果將vue改為vue的原型鏈，就可以解決這個(gè)問(wèn)題，如下圖
3.開始發(fā)送請(qǐng)求
5.帶參數(shù)的請(qǐng)求
如果想要發(fā)送帶json格式參數(shù)的請(qǐng)求，則需要使用qs模塊來(lái)處理參數(shù)
首先在main.js中導(dǎo)入qs模塊
然后使用qs處理參數(shù)
最終返回結(jié)果如下
6.回調(diào)函數(shù)的簡(jiǎn)寫
7.注意
如果在vue中使用，那么vue中data中的數(shù)據(jù)無(wú)法通過(guò)this直接引用，需要做如下處理
以上就是VUE使用axios調(diào)用后臺(tái)API接口的方法的詳細(xì)內(nèi)容，更多關(guān)于vue調(diào)用API接口的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue中div contenteditable 的光標(biāo)定位方法
今天小編就為大家分享一篇Vue中div contenteditable 的光標(biāo)定位方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
這篇文章主要介紹了Vue3?Reactive響應(yīng)式原理邏輯詳解，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07
vuex通過(guò)getters訪問(wèn)數(shù)據(jù)為undefined問(wèn)題及解決
這篇文章主要介紹了vuex通過(guò)getters訪問(wèn)數(shù)據(jù)為undefined問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue跳轉(zhuǎn)頁(yè)面攜帶參數(shù)并且立即執(zhí)行方法
這篇文章主要介紹了vue跳轉(zhuǎn)頁(yè)面攜帶參數(shù)并且立即執(zhí)行方法,首先定義跳轉(zhuǎn)函數(shù),結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10
詳解vue 配合vue-resource調(diào)用接口獲取數(shù)據(jù)
本篇文章主要介紹了vue 配合vue-resource調(diào)用接口獲取數(shù)據(jù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
kiss-vuex 是一個(gè)非常簡(jiǎn)單的語(yǔ)法糖類庫(kù)，這篇文章主要介紹了傻瓜式vuex語(yǔ)法糖kiss-vuex整理，非常具有實(shí)用價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
Vue3通過(guò)JSON渲染ElementPlus表單的流程步驟
這篇文章主要介紹了Vue3通過(guò)JSON渲染ElementPlus表單的流程步驟,文中通過(guò)代碼示例和圖文給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-10-10
VUE+Element-ui實(shí)戰(zhàn)之使用el-calendar日歷自定義顯示內(nèi)容
這篇文章主要介紹了VUE+Element-ui實(shí)戰(zhàn)之使用el-calendar日歷自定義顯示內(nèi)容方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了webstorm添加*.vue文件支持，webstorm很多的插件內(nèi)置，不用安裝插件，下面嘗試用vue和es6做項(xiàng)目，有興趣的可以了解一下2018-05-05
這篇文章主要給大家介紹了關(guān)于如何基于Vue3封裝一個(gè)好用的Websocket的相關(guān)資料,在Vue3中我們可以將Websocket類封裝成一個(gè)Vue插件,以便全局使用,需要的朋友可以參考下2023-09-09