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>
相关推荐
速易达网络4 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
lyj1689975 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
码荼7 小时前
学习开发之hashmap
java·python·学习·哈希算法·个人开发·小白学开发·不花钱不花时间crud
武昌库里写JAVA8 小时前
Oracle如何使用序列 Oracle序列使用教程
java·开发语言·spring boot·学习·课程设计
祁思妙想9 小时前
八股学习(三)---MySQL
数据库·学习·mysql
我在北京coding9 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
amazinging10 小时前
北京-4年功能测试2年空窗-报培训班学测开-第四十一天
python·学习·appium
Jyywww12110 小时前
微信小程序学习笔记
笔记·学习·微信小程序
海天胜景10 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
amazinging10 小时前
北京-4年功能测试2年空窗-报培训班学测开-第三十九天
python·学习·appium