快捷導(dǎo)航

一文了解axios和vue的整合操作

更新時(shí)間：2022年04月08日 08:38:40 作者：李奕赫揍小邰

axios作為Vue生態(tài)系統(tǒng)中濃墨重彩的一筆,我學(xué)習(xí)這個(gè)東西也是花了一定的時(shí)間的,下面這篇文章主要給大家介紹了關(guān)于axios和vue整合操作的相關(guān)資料,需要的朋友可以參考下

前言

前面學(xué)習(xí)了vue的本地應(yīng)用操作，本文將會(huì)學(xué)習(xí)Vue的網(wǎng)絡(luò)應(yīng)用，介紹axios并且學(xué)習(xí)axios和Vue的結(jié)合使用

一、axios是什么？

1.定義

Axios是一個(gè)基于promise 的 HTTP 庫，可以用在瀏覽器和 node.js中

2.原理

axios本質(zhì)上也是對(duì)原生XHR的封裝，只不過它是Promise的實(shí)現(xiàn)版本，符合最新的ES規(guī)范。

3、主要特點(diǎn)

1、從 node.js 創(chuàng)建 http 請(qǐng)求

2、支持 Promise API

3、攔截請(qǐng)求和響應(yīng)

4、轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)

5、取消請(qǐng)求

6、自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)

7、客戶端支持防御XSRF要特點(diǎn)

8、從瀏覽器創(chuàng)建 XMLHttpRequests

二、axios的應(yīng)用

1、axios必須先導(dǎo)入才可以使用

2、使用get或Post方法即可發(fā)送對(duì)應(yīng)的請(qǐng)求

3、then方法中的回調(diào)函數(shù)會(huì)在請(qǐng)求成功或失敗時(shí)觸發(fā)

4、通過回調(diào)函數(shù)的形參可以獲取響應(yīng)內(nèi)容，或錯(cuò)誤信息

代碼解析

1、axios通過get或者post發(fā)送請(qǐng)求

2、axios.get()中間填寫獲取的請(qǐng)求地址，后面跟上請(qǐng)求的參數(shù)使用？連接

3、.then（）代表的是成功獲取到后，如何處理的事件和獲取失敗，該如何處理的事件

兩個(gè)事件中間用逗號(hào)隔開

<input type="button" value="get請(qǐng)求" class="get">
    <input type="button" value="post請(qǐng)求" class="post">
    <!--官網(wǎng)提供的axios在線地址-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        /*
         接口1:隨機(jī)笑話
         請(qǐng)求地址:https://autumnfish.cn/api/joke/list
         請(qǐng)求方法:get
         請(qǐng)求參數(shù):num(笑話條數(shù),數(shù)字)
         響應(yīng)內(nèi)容:隨機(jī)笑話
     */
        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:用戶注冊(cè)
            請(qǐng)求地址:https://autumnfish.cn/api/user/reg
            請(qǐng)求方法:post
            請(qǐng)求參數(shù):username(用戶名,字符串)
            響應(yīng)內(nèi)容:注冊(cè)成功或失敗
        */
        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>

效果展示：

按下按鈕后，會(huì)在控制臺(tái)里，將回應(yīng)值全部打印出來

三、axios+vue的應(yīng)用

1、axios回調(diào)函數(shù)中的this已經(jīng)改變，無法訪問到data中數(shù)據(jù)

2、把this保存起來，回調(diào)函數(shù)中直接使用保存的this即可‘

3、和本地應(yīng)用的最大區(qū)別就是改變了數(shù)據(jù)來源

代碼展示：

1、這次將axios和vue相結(jié)合，改變了數(shù)據(jù)來源

2、可以將axios在網(wǎng)絡(luò)上獲取的信息，通過vue展示出來

3、axios的操作跟上面沒區(qū)別，就是放在vue的一個(gè)事件中。

4、因?yàn)榉祷氐幕貞?yīng)值很多，我們僅僅只想找到我們想要的。我們就可以直接寫。
例如：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>
    <!--官網(wǎng)提供的axios在線地址-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        /*
         接口1:隨機(jī)笑話
         請(qǐng)求地址:https://autumnfish.cn/api/joke/list
         請(qǐng)求方法:get
         請(qǐng)求參數(shù):num(笑話條數(shù),數(shù)字)
         響應(yīng)內(nèi)容:隨機(jī)笑話
     */
        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，因?yàn)閷?duì)象已經(jīng)發(fā)生改變*/
                    },function (err){ })
                }
            },
        })
    </script>

效果展示：

1、當(dāng)按下按鈕時(shí),就觸發(fā)事件。

2、因?yàn)関ue是基于數(shù)據(jù)開發(fā)，數(shù)據(jù)發(fā)生改變，頁面上的顯示也會(huì)隨之改變

3、當(dāng)觸發(fā)事件后，我們將axios獲取的數(shù)據(jù)賦值給vue中的變量，所以當(dāng)變量改變，頁面上的笑話也會(huì)改變。