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>
相关推荐
拼图2099 小时前
element-plus——图标推荐
javascript·vue.js·elementui
iFulling10 小时前
【计算机网络】第四章:网络层(上)
学习·计算机网络
香蕉可乐荷包蛋10 小时前
AI算法之图像识别与分类
人工智能·学习·算法
xiaoli232711 小时前
课题学习笔记1——文本问答与信息抽取关键技术研究论文阅读(用于无结构化文本问答的文本生成技术)
笔记·学习
人生游戏牛马NPC1号11 小时前
学习 Flutter (四):玩安卓项目实战 - 中
android·学习·flutter
LGGGGGQ12 小时前
嵌入式学习-PyTorch(7)-day23
人工智能·pytorch·学习
midsummer_woo12 小时前
基于springboot+vue+mysql工程教育认证的计算机课程管理平台(源码+论文)
vue.js·spring boot·mysql
stm 学习ing12 小时前
Python暑期学习笔记3
笔记·python·学习
屁股割了还要学12 小时前
【C语言进阶】内存函数
c语言·开发语言·学习·算法·青少年编程
靴子学长13 小时前
Lotus-基于大模型的查询引擎 -开源学习整理
python·学习·自然语言处理