axios增删改查

原创

mob64ca12d80f3a 2023-10-25 04:58:59 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12d80f3a的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用axios进行增删改查操作

1. 前言

在前端开发中，我们经常需要与后端进行数据交互，其中最常见的就是进行增删改查操作。而axios是一款非常流行的基于Promise的HTTP请求库，可以帮助我们简化前后端数据交互的过程。本文将会介绍使用axios进行增删改查操作的详细步骤，并附上相应的代码示例。

2. axios简介

axios 是一个基于 Promise 的 HTTP 请求客户端，可以用在浏览器和 node.js 中。它具有以下特征：

在浏览器中发送 XMLHttpRequests 请求
在 node.js 中发送 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换 JSON 数据

3. 增删改查操作流程

下面是使用axios进行增删改查操作的流程图：

pie
    title 增删改查操作流程
    "创建" : 30
    "读取" : 25
    "更新" : 20
    "删除" : 25

4. 增删改查操作步骤和代码示例

4.1 创建数据

创建数据是指向后端发送一个 POST 请求，将新的数据添加到数据库中。

代码示例：

// 引入axios库
import axios from 'axios';

// 创建数据的函数
async function createData(data) {
  try {
    const response = await axios.post('/api/data', data);
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

// 调用创建数据的函数
createData({ name: 'John', age: 25 });

4.2 读取数据

读取数据是指向后端发送一个 GET 请求，从数据库中获取数据。

代码示例：

// 引入axios库
import axios from 'axios';

// 读取数据的函数
async function readData() {
  try {
    const response = await axios.get('/api/data');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

// 调用读取数据的函数
readData();

4.3 更新数据

更新数据是指向后端发送一个 PUT 请求，将已有数据的内容进行修改。

代码示例：

// 引入axios库
import axios from 'axios';

// 更新数据的函数
async function updateData(id, newData) {
  try {
    const response = await axios.put(`/api/data/${id}`, newData);
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

// 调用更新数据的函数
updateData(1, { name: 'John', age: 30 });

4.4 删除数据

删除数据是指向后端发送一个 DELETE 请求，将指定的数据从数据库中删除。

代码示例：

// 引入axios库
import axios from 'axios';

// 删除数据的函数
async function deleteData(id) {
  try {
    const response = await axios.delete(`/api/data/${id}`);
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

// 调用删除数据的函数
deleteData(1);