Day18_2--Vue.js Ajax(使用 Axios)基础入门学习

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: 'john.doe@example.com'
      };

      axios.post('后端请求链接', newUser)
        .then(response => {
          console.log('User created:', response.data);
          // 更新 UI 或者执行其他操作
        })
        .catch(error => {
          console.error('Error creating user:', error);
        });
    }
  }
};
</script>
相关推荐
海天胜景26 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼26 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
百锦再30 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55535 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
我是小哪吒2.043 分钟前
书籍推荐-《对抗机器学习:攻击面、防御机制与人工智能中的学习理论》
人工智能·深度学习·学习·机器学习·ai·语言模型·大模型
✎ ﹏梦醒͜ღ҉繁华落℘1 小时前
WPF学习(四)
学习·wpf
✎ ﹏梦醒͜ღ҉繁华落℘2 小时前
WPF学习(动画)
学习·wpf
木头没有瓜2 小时前
vscode离线安装插件
ide·vue.js·vscode
循环过三天2 小时前
3-1 PID算法改进(积分部分)
笔记·stm32·单片机·学习·算法·pid
生如夏花℡3 小时前
HarmonyOS学习记录3
学习·ubuntu·harmonyos