VUE使用axios調(diào)用后臺API接口的方法
引言
Vue (讀音 /vjuː/，類似于 view) 是一套用于構建用戶界面的漸進式JavaScript框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，方便與第三方庫或既有項目整合。我們都知道VUE更多是注重前段用戶界面的渲染合操作，但是如果想到實現(xiàn)前后端之間的交互調(diào)用后臺API，就需要借助其他組件，如今天要講到的Axios，下邊就重點講解axios在vue中的使用。
Axios，基于 Promise 的 HTTP 客戶端，可以工作于瀏覽器中，也可以在 node.js 中使用。
功能：
- 從瀏覽器中創(chuàng)建 XMLHttpRequest
- 從 node.js 中創(chuàng)建 http 請求
- 支持 Promise API
- 攔截請求和響應
- 轉換請求和響應數(shù)據(jù)
- 取消請求
- 自動轉換 JSON 數(shù)據(jù)
- 客戶端支持防止 XSRF 攻擊
1.安裝axios
cnpm i axios -S
2.方案一：修改原型鏈
首先，在main.js中引入
在這個時候，你還是無法在組件中使用axios的，但如果將vue改為vue的原型鏈，就可以解決這個問題，如下圖
3.開始發(fā)送請求
5.帶參數(shù)的請求
如果想要發(fā)送帶json格式參數(shù)的請求，則需要使用qs模塊來處理參數(shù)
首先在main.js中導入qs模塊
然后使用qs處理參數(shù)
最終返回結果如下
6.回調(diào)函數(shù)的簡寫
7.注意
如果在vue中使用，那么vue中data中的數(shù)據(jù)無法通過this直接引用，需要做如下處理
以上就是VUE使用axios調(diào)用后臺API接口的方法的詳細內(nèi)容，更多關于vue調(diào)用API接口的資料請關注腳本之家其它相關文章！
相關文章
今天小編就為大家分享一篇vue項目中錨點定位替代方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue-video-player 斷點續(xù)播的實現(xiàn)
這篇文章主要介紹了vue-video-player 斷點續(xù)播的實現(xiàn),本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-02
創(chuàng)建vue項目沒有router、view的解決辦法
在學習vue的時候遇到很多問題,這里做一些總結,下面這篇文章主要給大家介紹了關于創(chuàng)建vue項目沒有router、view文件夾的解決辦法,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-11-11
computed是vue的配置選項,它的值是一個對象,其中可定義多個計算屬性,每個計算屬性就是一個函數(shù),下面這篇文章主要給大家介紹了關于vue中計算屬性computed的詳細講解,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了Element--el-tabs固定在頂部問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
本篇文章主要介紹了談談Vue.js——vue-resource全攻略，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
本篇文章主要介紹了vuex中使用對象展開運算符的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了在vue中使用image-webpack-loader實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue如何使用cookie、localStorage和sessionStorage進行儲存數(shù)據(jù)
這篇文章主要介紹了vue如何使用cookie、localStorage和sessionStorage進行儲存數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了VUE組件的計算屬性詳解，使用計算機屬性還是methods取決于你是否需要緩存，當遍歷大數(shù)組和做大量計算時，應當使用計算機屬性，除非你不希望得到緩存，下文來了解具體詳情2022-06-06