快捷導(dǎo)航

通過Vue+axios獲取接口數(shù)據(jù)的示例詳解

更新時(shí)間：2025年08月01日 09:51:43 作者：黛琳ghz

這篇文章主要介紹了Vue結(jié)合axios獲取笑話接口數(shù)據(jù)的示例,重點(diǎn)講解axios的特性、使用方法及請(qǐng)求方式,演示如何通過get方法獲取數(shù)據(jù)并展示,同時(shí)解決this指向問題,感興趣的小伙伴跟著小編一起來看看吧

前言

關(guān)于這個(gè)Vue + axios 獲取接口數(shù)據(jù)的小demo，實(shí)現(xiàn)效果很簡(jiǎn)單，就是在Vue語法中，通過axios來獲取接口的數(shù)據(jù)，然后打印出來，這里我們使用的是一個(gè)笑話的接口，其中重點(diǎn)關(guān)注的是如何使用axios、通過axios獲取接口數(shù)據(jù)，因此這里就不介紹Vue的代碼了，接下來先了解學(xué)習(xí)一下axios概要和使用方法（學(xué)過的可以直接看案例）。

關(guān)于axios概要

什么是axios

背景：以前關(guān)于get、post、put等請(qǐng)求，我們第一時(shí)間都想到就是jQuery。但如今隨著Vue、React等優(yōu)秀框架的出現(xiàn)，jQuery逐漸淡出了市場(chǎng)，同時(shí)促使了axios輕量級(jí)HTTP庫(kù)的出現(xiàn)。
Axios，是一個(gè)基于promise的網(wǎng)絡(luò)請(qǐng)求庫(kù)，類似于jQuery的AJAX，作用于node.js和瀏覽器中，它是 isomorphic 的(即同一套代碼可以運(yùn)行在瀏覽器和node.js中)。在服務(wù)端它使用原生node.js http模塊, 而在客戶端 (瀏覽端) 則使用XMLHttpRequest。

axios特性

支持 Promise API
攔截請(qǐng)求和響應(yīng)（可以在請(qǐng)求前及響應(yīng)前做某些操作，例如，在請(qǐng)求前想要在這個(gè)請(qǐng)求頭中加一些信息，如授權(quán)信息等)。
轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)(例如，在請(qǐng)求時(shí)一些敏感信息需要加密，在返回?cái)?shù)據(jù)時(shí)需要解密)
取消請(qǐng)求(在解決高并發(fā)時(shí)，取消一些不必要的冗余重復(fù)請(qǐng)求)
自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)(HTTP 請(qǐng)求時(shí)，傳輸?shù)臄?shù)據(jù)都是字符串，如果服務(wù)器端返回的數(shù)據(jù)不是字符串類型，就需要使用JSON.parse()對(duì)它進(jìn)行轉(zhuǎn)換。然后向后臺(tái)發(fā)起數(shù)據(jù)請(qǐng)求，會(huì)自動(dòng)地進(jìn)行轉(zhuǎn)換，不需要進(jìn)行手動(dòng)操作)。
客戶端支持防御XSS攻擊(XSS是客戶端經(jīng)常出現(xiàn)的一種攻擊方式，它發(fā)生在目標(biāo)用戶的瀏覽器層面上，當(dāng)渲染DOM樹的過程中發(fā)生了不在預(yù)期范圍內(nèi)的JavaScript代碼執(zhí)行時(shí)，就可以被判定為發(fā)生了XSS攻擊)。

axios瀏覽器支持情況

axios安裝與使用

Github開源地址： https://github.com/axios/axios

使用CDN鏈接axios（這種方式較少使用，目前基本上都是腳手架創(chuàng)建項(xiàng)目后采用ES6 Modules引入需要的插件，但是這里的小demo可以使用這個(gè)，非常方便）
使用 jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

使用 unpkg CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

使用 npm安裝:

$ npm install axios

使用 cnpm安裝:

$ cnpm install axios

使用 yarn安裝:

$ yarn add axios

axios請(qǐng)求方法

get：獲取數(shù)據(jù)
post：提交數(shù)據(jù)(表單提交 + 文件上傳，一般用于提交數(shù)據(jù)，如上傳圖片或上傳 Excel 文件等)。
put：更新數(shù)據(jù)(所有數(shù)據(jù)推送到后端)。
patch：更新數(shù)據(jù)(只將修改的數(shù)據(jù)推送到后端)
delete：刪除數(shù)據(jù)
這5個(gè)請(qǐng)求方法都是由后端定義的，也就是說，因?yàn)檎?qǐng)求的接口都是請(qǐng)求到后端，然后由后端去操作數(shù)據(jù)庫(kù)，把數(shù)據(jù)進(jìn)行存儲(chǔ)、修改和刪除，所以具體的請(qǐng)求方法都是由后端來確定的。
具體就不介紹每個(gè)方法的使用案例了

axios的使用方法（以get為例子）

方法一

axios.get("url").then(function (res) {
    console.log(res);
    }),
function (err) {
    console.log(err);
    }

方法二

axios({
     method: "get",
     url: "url"
}).then(res => {
     console.log(res);
}), (err) => console.log(err)

demo介紹

布局和樣式就是一個(gè)按鈕加一個(gè)顯示文字的區(qū)域，這不是重點(diǎn)，重點(diǎn)通過axios獲取到數(shù)據(jù)。
功能就是點(diǎn)擊按鈕后，通過axios獲取到數(shù)據(jù)，然后顯示在方框中。
使用的接口如下：

完整代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
</style>

<body>
    <div id="app">
        <input type="button" @click="getJoke" value="點(diǎn)擊獲取笑話數(shù)據(jù)">
        <div style="width: 400px;height: 400px; border: 1px solid; overflow: auto;">{{joke}}</div>
    </div>
</body>
<!-- 通過CDN鏈接axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    //vue2寫法
    // var app =new Vue({
    //     el:'#app',
    //     data:{

    //     },
    //     methods:{

    //     }
    // }).mount('#app');
    const {
        createApp
    } = Vue
    createApp({
        data() {
            return {
                joke: "通過axios獲取笑話"
            }
        },
        methods: {
            getJoke: function () {
                //axios獲取后端接口數(shù)據(jù)方法一
                // console.log(this.joke);
                var that = this
                axios.get("https://autumnfish.cn/api/joke").then(
                        function (res) {
                            console.log(res.data);
                            // console.log(that.joke);
                            that.joke = res.data
                        }),
                    function (err) {
                        console.log(err);
                    }

                //axios獲取后端接口數(shù)據(jù)方法二
                // axios({
                //     method: "get",
                //     url: "https://autumnfish.cn/api/joke"
                // }).then(res => {
                //     console.log(res);
                // }), (err) => console.log(err)
            }
        },
    }).mount('#app')
</script>

</html>

實(shí)現(xiàn)效果

案例分析

按鈕通過v-on綁定一個(gè)點(diǎn)擊事件，點(diǎn)擊之后執(zhí)行axios.get這個(gè)方法。
文字區(qū)域通過v-model實(shí)現(xiàn)數(shù)據(jù)雙向綁定，把通過axios獲取到的數(shù)據(jù)顯示在上面。
這里要注意var that = this這段代碼，在axios回調(diào)函數(shù)中的this已經(jīng)改變無法訪問到data中數(shù)據(jù)，因此通過var that = this這段代碼把this保存起來，然后回調(diào)函數(shù)中直接使用保存的this即可。

以上就是通過Vue+axios獲取接口數(shù)據(jù)的示例詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue axios獲取接口數(shù)據(jù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: