Day18_2--Vue.js Ajax（使用 Axios）基础入门学习

IT ·南栀2024-08-09 13:50

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

什么是 Axios？

Axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js 环境中。它是现代化的 Ajax 库，用来替代传统的 XMLHttpRequest。

为什么选择 Axios？

简单易用：Axios 提供了简洁且强大的 API，使得发送 HTTP 请求变得非常简单。
支持 Promise：Axios 支持 Promise API，能够更好地处理异步操作和错误。
广泛应用：在 Vue.js 社区中得到广泛的应用和支持，与 Vue.js 结合使用非常方便。

如何在 Vue.js 中使用 Axios？

步骤一：安装 Axios

推荐官网直接下载到本地；

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

首先，你需要通过 npm 安装 Axios：

bash 复制代码

npm install axios

步骤二：在 Vue 组件中使用 Axios

在 Vue 组件中引入 Axios，并发起 HTTP 请求：

vue 复制代码

<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>
/* 样式可以根据需要添加 */
</style>

在这个例子中，我们在 mounted 钩子中调用 fetchUsers 方法来获取用户列表。Axios 发起 GET 请求，并将返回的数据存储在组件的 users 数据属性中。

步骤三：处理 POST 请求

除了 GET 请求外，Axios 也支持 POST、PUT、DELETE 等 HTTP 方法。例如，发送一个 POST 请求来创建新用户：

vue 复制代码

<script>
export default {
  // 省略其他部分...

  methods: {
    createUser() {
      const newUser = {
        name: 'John Doe',
        email: '[email protected]'
      };

      axios.post('后端请求链接', newUser)
        .then(response => {
          console.log('User created:', response.data);
          // 更新 UI 或者执行其他操作
        })
        .catch(error => {
          console.error('Error creating user:', error);
        });
    }
  }
};
</script>