引言

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.開(kāi)始發(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)寫(xiě)

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)注好吧啦網(wǎng)其它相關(guān)文章！