Vue.js 中的 Ajax 請求（使用 Axios）

什么是 Axios？

Axios 是一個基于 Promise 的 HTTP 客戶端，可以用于瀏覽器和 Node.js 環(huán)境中。它是現(xiàn)代化的 Ajax 庫，用來替代傳統(tǒng)的 XMLHttpRequest。

為什么選擇 Axios？

• 簡單易用：Axios 提供了簡潔且強(qiáng)大的 API，使得發(fā)送 HTTP 請求變得非常簡單。
• 支持 Promise：Axios 支持 Promise API，能夠更好地處理異步操作和錯誤。
• 廣泛應(yīng)用：在 Vue.js 社區(qū)中得到廣泛的應(yīng)用和支持，與 Vue.js 結(jié)合使用非常方便。

如何在 Vue.js 中使用 Axios？

步驟一：安裝 Axios

推薦官網(wǎng)直接下載到本地；
Github開源地址： https://github.com/axios/axios
首先，你需要通過 npm 安裝 Axios：

npm install axios

步驟二：在 Vue 組件中使用 Axios

在 Vue 組件中引入 Axios，并發(fā)起 HTTP 請求：

<template><div><h2>用戶列表</h2><ul><li v-for="user in users" :key="user.id">{{ user.name }}</li></ul></div>
</template><script>
import axios from 'axios';export default {data() {return {users: []};},mounted() {this.fetchUsers();},methods: {fetchUsers() {axios.get('后端請求鏈接').then(response => {this.users = response.data;}).catch(error => {console.log('Error fetching users', error);});}}
};
</script><style>
/* 樣式可以根據(jù)需要添加 */
</style>

在這個例子中，我們在 mounted 鉤子中調(diào)用 fetchUsers 方法來獲取用戶列表。Axios 發(fā)起 GET 請求，并將返回的數(shù)據(jù)存儲在組件的 users 數(shù)據(jù)屬性中。

步驟三：處理 POST 請求

除了 GET 請求外，Axios 也支持 POST、PUT、DELETE 等 HTTP 方法。例如，發(fā)送一個 POST 請求來創(chuàng)建新用戶：

<script>
export default {// 省略其他部分...methods: {createUser() {const newUser = {name: 'John Doe',email: 'john.doe@example.com'};axios.post('后端請求鏈接', newUser).then(response => {console.log('User created:', response.data);// 更新 UI 或者執(zhí)行其他操作}).catch(error => {console.error('Error creating user:', error);});}}
};
</script>