Vue3使用axios實(shí)現(xiàn)Ajax請求過程

更新時(shí)間：2026年05月28日 09:53:06 作者：吳聲子夜歌

這段文章詳細(xì)介紹了axios在Vue.js項(xiàng)目中的應(yīng)用,包括如何引入axios、發(fā)送GET和POST請求、處理響應(yīng)數(shù)據(jù)等,通過實(shí)際示例展示了如何使用axios進(jìn)行Ajax請求,適用于Vue.js開發(fā)者進(jìn)行數(shù)據(jù)交互

1、什么是axios

在實(shí)際開發(fā)過程中，瀏覽器通常需要和服務(wù)器端進(jìn)行數(shù)據(jù)交互。而Vue.js并未提供與服務(wù)器端通信的接口。

從Vue.js 2.0版本之后，官方推薦使用axios來實(shí)現(xiàn)Ajax請求。

axios是一個(gè)基于promise的HTTP客戶端，它的主要特點(diǎn)如下：

從瀏覽器中創(chuàng)建XMLHttpRequest。
從node.js發(fā)出HTTP請求。
支持Promise API。
攔截請求和響應(yīng)。
轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)。
取消請求。
自動轉(zhuǎn)換JSON數(shù)據(jù)。
客戶端支持防止CSRF/XSRF。

2、引入axios

在使用axios之前需要在頁面中進(jìn)行引入，可以使用CDN方式引入axios。

代碼如下：

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

如果在項(xiàng)目中使用axios，則可以使用npm方式進(jìn)行安裝。

在命令提示符窗口中輸入如下命令：

 npm install axios --save

或者使用yarn安裝，命令如下：

 yarn add axios –save

3、發(fā)送get請求

get請求主要從服務(wù)器上獲取數(shù)據(jù)，傳遞的數(shù)據(jù)量比較小。使用axios發(fā)送get請求主要有兩種格式：

第一種是使用axios()方法，格式如下：

 axios(options)

options參數(shù)用于設(shè)置發(fā)送請求的配置選項(xiàng)。示例代碼如下：

 axios({
     method: 'get',                 //請求方式
      url:'/book',                   //請求的URL
      params:{type:'Vue',number:10}  //傳遞的參數(shù)
 })

第二種是使用axios的get()方法，格式如下：

axios.get(url[,options])

url：請求的服務(wù)器URL。
options：發(fā)送請求的配置選項(xiàng)。

示例代碼如下：

 axios.get('/book',{
   params:{            //傳遞的參數(shù)
           type : 'Vue',
           number : 10
     }
 })

使用axios發(fā)送get請求時(shí)，如果有要發(fā)送的數(shù)據(jù)，可以在配置選項(xiàng)中使用params字段指定要發(fā)送的數(shù)據(jù)。另外，還可以采用查詢字符串的形式將數(shù)據(jù)附加在URL后面。

例如，上述代碼可以修改為：

axios.get('/book?type=Vue&number=10')

使用axios無論發(fā)送get請求還是post請求，在發(fā)送請求后都需要使用回調(diào)函數(shù)對請求的結(jié)果進(jìn)行處理。

如果請求成功，需要使用.then方法處理請求的結(jié)果；如果請求失敗，需要使用.catch方法處理請求的結(jié)果。

示例代碼如下：

axios.get('/book',{
	params: {
		type: 'Vue',
		number: 10
	}
}).then((response)=>{
	console.log(response.data);
}).catch((error)=>{
	console.log(error);
})

這兩個(gè)回調(diào)函數(shù)都有各自獨(dú)立的作用域，如果在函數(shù)內(nèi)部訪問Vue實(shí)例，則不能直接使用this關(guān)鍵字。為了解決這個(gè)問題，需要在回調(diào)函數(shù)的后面添加.bind(this)。

示例：讀取JSON

使用axios發(fā)送get請求，讀取JSON文件中的數(shù)據(jù)，并輸出讀取結(jié)果。

關(guān)鍵代碼如下：

<div id="app">
    <button @click="reqJson">獲取JSON數(shù)據(jù)</button>
    <!-- 通過<div>標(biāo)簽輸出請求內(nèi)容-->
    <div>{{message}}</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-router@next"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    const vm = Vue.createApp({
        data() {
            return {
                message: ''
            }
        },
        methods: {
            reqJson: function() {
                axios({
                    method: 'get',
                    url: 'http://127.0.0.1:3000/api/user'
                }).then((result) => {
                   this.message = result.data;
                }).catch((err) => {
                    console.log(err);
                });
            }
        }
    });
    vm.mount('#app');
</script>

服務(wù)端：

const express = require('express');
const app = express();
//處理前端跨域
const cors = require('cors');
app.use(cors({
  origin: 'http://127.0.0.1:5500'
}));

// 返回 JSON 接口
app.get('/api/user', (req, res) => {
    res.json({
        code: 0,
        msg: 'success',
        data: {
            id: 1,
            name: '李四',
            role: 'admin'
        }
    });
});

app.listen(3000, () => {
    console.log('Express 服務(wù)已啟動：http://localhost:3000/api/user');
});

運(yùn)行上述代碼，單擊“獲取JSON數(shù)據(jù)”按鈕讀取JSON數(shù)據(jù)，結(jié)果如圖所示。

4、發(fā)送post請求

post請求主要是向服務(wù)器傳遞數(shù)據(jù)，傳遞的數(shù)據(jù)量比較大。使用axios發(fā)送post請求同樣有兩種格式：

第一種是使用axios()方法，格式如下：

axios(options)

options參數(shù)用于設(shè)置發(fā)送請求的配置選項(xiàng)。

示例代碼如下：

axios({
	method: 'post',
	url: '/book',
	data: {
		type: 'Vue',
		number: 10
	}
})

url：請求的服務(wù)器URL。
data：發(fā)送的數(shù)據(jù)。
options：發(fā)送請求的配置選項(xiàng)。

axios.post('book.php', {
	type:'Vue',
	number:10
})

使用axios發(fā)送post請求來傳遞數(shù)據(jù)時(shí)，數(shù)據(jù)傳遞的方式有很多種。

可以將傳遞的數(shù)據(jù)寫成對象的形式，如“{type:‘Vue’，number:10}”?。
還可以將傳遞的數(shù)據(jù)寫成字符串的形式，如“type=Vue&number=10”?。

示例：驗(yàn)證用戶登錄。

在用戶登錄表單中，使用axios檢測用戶登錄是否成功。實(shí)現(xiàn)步驟如下。

1.定義

元素，并設(shè)置其id屬性值為app，在該元素中定義用戶登錄表單，應(yīng)用v-model指令對用戶名文本框和密碼框進(jìn)行數(shù)據(jù)綁定，當(dāng)單擊“登錄”按鈕時(shí)調(diào)用login()方法，代碼如下：

<div id="app">
    <div class="title">用戶登錄</div>
    <form ref="myform">
        <div class="one">
            <div class="one">
                <label for="username">用戶名：</label>
                <input id="uesrname" type="text" v-model="username" ref="uname">
            </div>
            <div class="one">
                <label for="pwd">密碼：</label>
                <input id="pwd" type="password" v-model="pwd" ref="upwd">
            </div>
            <div class="two">
                <input type="button" value="登錄" @click="login">
                <input type="reset" value="重置">
            </div>
        </div>
    </form>
</div>

2.編寫CSS代碼，為頁面元素設(shè)置樣式，代碼如下：

<style>
    body{
        font-family: 微軟雅黑;
        font-size: 14px;
    }
    .title{
        font-size: 18px;
        line-height: 50px;
        margin-left: 130px;
    }
    .one{
        margin: 10px 0;
    }
    .one label{
        width: 100px;
        float: left;
        text-align: right;
        height: 20px;
        line-height: 20px;
    }
    .two{
        padding: 120px;
    }
</style>

3.創(chuàng)建根組件實(shí)例，在實(shí)例中定義數(shù)據(jù)和方法，在定義的login方法中，首先判斷用戶輸入的用戶名和密碼是否為空，如果不為空就使用axios發(fā)送post請求，根據(jù)服務(wù)器返回的響應(yīng)判斷登錄是否成功。

代碼如下：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-router@next"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    const vm = Vue.createApp({
        data() {
            return {
                username: '',
                pwd: ''
            }
        },
        methods: {
            login: function() {
                if(this.username === '') {
                    alert('請輸入用戶名');
                    this.$refs.uname.focus();
                } else if(this.pwd === '') {
                    alert('請輸入密碼');
                    this.$refs.upwd.focus();
                } else {
                    console.log(this.username + ':' + this.pwd);
                    axios.post('http://127.0.0.1:3000/api/login', {
                        username: this.username,
                        pwd: this.pwd
                    }).then((result) => {
                      console.log(result);
                      alert('登錄成功!')
                    }).catch((err) => {
                       console.log(err);
                    });
                }
            }
        }
    });
    vm.mount('#app');
</script>

后端：

const express = require('express');
const app = express();

//處理前端跨域
const cors = require('cors');
app.use(cors({
  origin: 'http://127.0.0.1:5500'
}));

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// 返回 JSON 接口
app.get('/api/user', (req, res) => {
    res.json({
        code: 0,
        msg: 'success',
        data: {
            id: 1,
            name: '李四',
            role: 'admin'
        }
    });
});

//登錄接口
app.post('/api/login', (req, res) => {
    console.log(req.body);
    res.json({ msg: 'ok' });
});

app.listen(3000, () => {
    console.log('Express 服務(wù)已啟動：http://localhost:3000/api/user');
});

運(yùn)行上述代碼，在表單中輸入正確的用戶名“jerry”和密碼“123456”?，單擊“登錄”按鈕后會顯示登錄成功的提示，如圖所示。