VUE使用axios調用后臺API接口的方法

引言

Vue (讀音 /vjuː/，類似于 view) 是一套用于構建用戶界面的漸進式JavaScript框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，方便與第三方庫或既有項目整合。我們都知道VUE更多是注重前段用戶界面的渲染合操作，但是如果想到實現前后端之間的交互調用后臺API，就需要借助其他組件，如今天要講到的Axios，下邊就重點講解axios在vue中的使用。

Axios，基于 Promise 的 HTTP 客戶端，可以工作于瀏覽器中，也可以在 node.js 中使用。

功能：

從瀏覽器中創建 XMLHttpRequest 從 node.js 中創建 http 請求 支持 Promise API 攔截請求和響應 轉換請求和響應數據 取消請求 自動轉換 JSON 數據 客戶端支持防止 XSRF 攻擊

1.安裝axios

cnpm i axios -S

2.方案一：修改原型鏈

首先，在main.js中引入

在這個時候，你還是無法在組件中使用axios的，但如果將vue改為vue的原型鏈，就可以解決這個問題，如下圖

3.開始發送請求

5.帶參數的請求

如果想要發送帶json格式參數的請求，則需要使用qs模塊來處理參數

首先在main.js中導入qs模塊

然后使用qs處理參數

最終返回結果如下

6.回調函數的簡寫

7.注意

如果在vue中使用，那么vue中data中的數據無法通過this直接引用，需要做如下處理

以上就是VUE使用axios調用后臺API接口的方法的詳細內容，更多關于vue調用API接口的資料請關注好吧啦網其它相關文章！