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講解完了!

本文轉載自:https://www.cnblogs.com/fxwoniu/p/11539788.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM