一文了解axios和vue的整合操作
前言
前面學習了vue的本地應用操作，本文將會學習Vue的網絡應用，介紹axios并且學習axios和Vue的結合使用
一、axios是什么？
1.定義
Axios是一個基于promise 的 HTTP 庫，可以用在瀏覽器和 node.js中
2.原理
axios本質上也是對原生XHR的封裝，只不過它是Promise的實現版本，符合最新的ES規(guī)范。
3、主要特點
1、從 node.js 創(chuàng)建 http 請求
2、支持 Promise API
3、攔截請求和響應
4、轉換請求和響應數據
5、取消請求
6、自動轉換JSON數據
7、客戶端支持防御XSRF要特點
8、從瀏覽器創(chuàng)建 XMLHttpRequests
二、axios的應用
1、axios必須先導入才可以使用
2、使用get或Post方法即可發(fā)送對應的請求
3、then方法中的回調函數會在請求成功或失敗時觸發(fā)
4、通過回調函數的形參可以獲取響應內容，或錯誤信息
代碼解析
1、axios通過get或者post發(fā)送請求
2、axios.get()中間填寫獲取的請求地址，后面跟上請求的參數使用？連接
3、.then（）代表的是成功獲取到后，如何處理的事件和獲取失敗，該如何處理的事件
兩個事件中間用逗號隔開
<input type="button" value="get請求" class="get">
<input type="button" value="post請求" class="post">
<!--官網提供的axios在線地址-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
/*
接口1:隨機笑話
請求地址:https://autumnfish.cn/api/joke/list
請求方法:get
請求參數:num(笑話條數,數字)
響應內容:隨機笑話
*/
document.querySelector(".get").onclick=function (){
axios.get("https://autumnfish.cn/api/joke/list?num=3")
.then(function (response){
console.log(response);
},function (err){
console.log(err);
})
}
/*
接口2:用戶注冊
請求地址:https://autumnfish.cn/api/user/reg
請求方法:post
請求參數:username(用戶名,字符串)
響應內容:注冊成功或失敗
*/
document.querySelector(".post").onclick=function(){
axios.post("https://autumnfish.cn/api/user/reg",{username:"李奕赫"}).then(function (response){
console.log(response);
},function (err){
console.log(err);
})
}
</script>
效果展示：
按下按鈕后，會在控制臺里，將回應值全部打印出來
三、axios+vue的應用
1、axios回調函數中的this已經改變，無法訪問到data中數據
2、把this保存起來，回調函數中直接使用保存的this即可‘
3、和本地應用的最大區(qū)別就是改變了數據來源
代碼展示：
1、這次將axios和vue相結合，改變了數據來源
2、可以將axios在網絡上獲取的信息，通過vue展示出來
3、axios的操作跟上面沒區(qū)別，就是放在vue的一個事件中。
4、因為返回的回應值很多，我們僅僅只想找到我們想要的。我們就可以直接寫。
例如：response.data 我們可以直接下面套著寫
<div id="app">
<input type="button" value="獲取笑話" @click="getJoke">
<p>{{joke}}</p>
</div>
<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--官網提供的axios在線地址-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
/*
接口1:隨機笑話
請求地址:https://autumnfish.cn/api/joke/list
請求方法:get
請求參數:num(笑話條數,數字)
響應內容:隨機笑話
*/
var app=new Vue({
el:"#app",
data:{
joke:"很好笑的笑話"
},
methods:{
getJoke:function (){
var that=this;
axios.get("https://autumnfish.cn/api/joke").then(function (response){
console.log(response.data)
that.joke=response.data; /*這里不能使用this.joke，因為對象已經發(fā)生改變*/
},function (err){ })
}
},
})
</script>效果展示：
1、當按下按鈕時,就觸發(fā)事件。
2、因為vue是基于數據開發(fā)，數據發(fā)生改變，頁面上的顯示也會隨之改變
3、當觸發(fā)事件后，我們將axios獲取的數據賦值給vue中的變量，所以當變量改變，頁面上的笑話也會改變。
總結
本文介紹了axios和vue的簡單整合實驗，大家可以親自實踐操作一下?。?/p>
到此這篇關于axios和vue整合操作的文章就介紹到這了,更多相關axios vue整合操作內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue之綁定class樣式與style樣式方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
這篇文章主要介紹了vue3接口數據賦值對象,渲染報錯問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
本篇文章主要介紹了vue如何獲取點擊事件源的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
ArcGis?API?for?js在vue.js中的使用示例詳解
這篇文章主要為大家介紹了ArcGis?API?for?js在vue.js中的使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
今天小編就為大家分享一篇vue初始化動畫加載的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue中touch和click共存的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
本文主要介紹了vue使用axios接收流文件的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
本篇文章主要介紹關于vue-resource報錯450的解決方案，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了Vue 后臺管理類項目兼容IE9+的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-02-02
Vue異步更新DOM及$nextTick執(zhí)行機制解讀
這篇文章主要介紹了Vue異步更新DOM及$nextTick執(zhí)行機制解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03