以JavaScript的学习角度看Axios,并以spring boot+vue3为例具体分析实现

什么是Axios

Axios 是一个基于 Promise 的 HTTP 客户端,用于在浏览器和 后端 中发送异步的 HTTP 请求。它功能强大、易用,常用于与 API 交互,发送 GET、POST、PUT、DELETE 等请求。

Axios 的主要特点:

  1. 支持 Promise
    Axios 基于 Promise,能够很好地与现代 JavaScript 异步编程模式结合使用,例如使用 async/await,简化了异步代码的编写。

  2. 请求和响应的拦截器
    通过使用拦截器,开发者可以在请求发出前或响应返回后对数据进行处理,这使得在请求发送前进行一些处理或对返回结果进行统一的预处理变得更容易。

  3. 自动转换 JSON 数据
    Axios 会自动将响应中的 JSON 数据转换为 JavaScript 对象,这使得处理数据变得简单。

  4. 浏览器支持防止 CSRF
    在浏览器环境中,Axios 自动为跨站请求伪造(CSRF)防护提供默认支持,这使得它在处理安全性时非常有用。

  5. 客户端支持取消请求
    通过 CancelToken,你可以随时取消正在进行的请求,以节省资源或优化用户体验。

  6. 支持超时和防止重复请求
    Axios 支持为请求设置超时,并且可以轻松处理需要避免重复发送请求的场景。

  7. 在 Node.js 中支持流
    在 Node.js 环境中,Axios 支持与文件流进行交互,这在处理大文件下载或上传时非常方便。

关于promise,可以移步看我这篇帖子:

https://blog.csdn.net/qq_55018264/article/details/142874115

Axios的基础使用

Axios 基于 Promise,意味着你可以像处理 Promise 一样使用它的 then() 和 catch() 方法。then() 用于处理成功的请求,catch() 用于处理失败的请求

基本的 GET 请求示例:

const axios = require('axios');// 发送 GET 请求
axios.get('https://api.example.com/data').then(response => {console.log(response.data);}).catch(error => {console.error('Error:', error);});

POST 请求的例子:

axios.post('https://api.example.com/data', {username: 'test',password: '1234'}).then(response => {console.log(response.data);}).catch(error => {console.error('Error:', error);});

也可以使用 async/await,它是 Promise 的简化语法:

async function fetchData() {try {const response = await axios.get('/api/data');console.log(response.data);} catch (error) {console.error(error);}
}

以spring boot+vue3为例学习使用(简易版)

代码(便于读者测试):

实体类 Article

package com.accumulation.pojo;import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;@Data
@NoArgsConstructor
@AllArgsConstructor
public class Article {private int id; // 新增 id 属性private String title;private String category;private String time;private String state;
}
控制器 TodoController
package com.accumulation.controller;import com.accumulation.pojo.Article;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.web.bind.annotation.*;import java.util.ArrayList;
import java.util.List;
import java.util.stream.Collectors;@RestController
@RequestMapping("/article")
@CrossOrigin//支持跨域
public class ArticleController {private List<Article> articleList = new ArrayList<>();{articleList.add(new Article(1,"特斯拉市值一夜蒸发超4700亿", "时事", "2024-10-10", "已发布"));articleList.add(new Article(2,"中国男足为何在澳大利亚一败涂地", "足球", "2024-10-11", "草稿"));articleList.add(new Article(3,"博物馆文创为何让年轻人着迷", "旅游", "2024-10-10", "已发布"));}//新增文章@PostMapping("/add")public String add(@RequestBody Article article) {articleList.add(article);return "新增成功";}//获取所有文章信息@GetMapping("/getAll")public List<Article> getAll(HttpServletResponse response) {return articleList;}//根据文章分类和发布状态搜索@GetMapping("/search")public List<Article> search(@RequestParam(required = false) String category, @RequestParam(required = false) String state) {return articleList.stream().filter(article -> {boolean matchesCategory = (category == null || category.isEmpty() || article.getCategory().contains(category));boolean matchesState = (state == null || state.isEmpty() || article.getState().contains(state));return matchesCategory && matchesState;}).collect(Collectors.toList());}// 根据ID删除文章@GetMapping("/del")public String del(@RequestParam int id) {articleList.removeIf(a -> a.getId() == id); // 根据 ID 删除文章return "删除成功";}// 更新文章标题@PostMapping("/update")public String update(@RequestBody Article article) {for (int i = 0; i < articleList.size(); i++) {if (articleList.get(i).getId() == article.getId()) {articleList.get(i).setTitle(article.getTitle()); // 更新标题break;}}return "更新成功";}
}
Vue 组件
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app">文章分类: <input type="text" v-model="searchConditions.category">发布状态: <input type="text" v-model="searchConditions.state"><button v-on:click="search">搜索</button><br /><br /><!-- 文章列表 --><table border="1 solid" colspa="0" cellspacing="0"><tr><th>文章标题</th><th>分类</th><th>发表时间</th><th>状态</th><th>操作</th></tr><tr v-for="(article, index) in articleList" :key="article.id"><td>{{ article.title }}</td><td>{{ article.category }}</td><td>{{ article.time }}</td><td>{{ article.state }}</td><td><button v-on:click="edit(index)">编辑</button><button v-on:click="del(index)">删除</button></td></tr></table><!-- 编辑文章模态框 --><div v-if="isEditing" class="modal"><h2>编辑文章</h2><label>标题:</label><input type="text" v-model="currentArticle.title"><br /><button v-on:click="updateArticle">保存</button><button v-on:click="cancelEdit">取消</button></div></div><!-- 导入axios的js文件 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script type="module">// 导入vue模块import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';// 创建vue应用实例createApp({data() {return {articleList: [],searchConditions: {category: '',state: ''},isEditing: false, // 控制模态框的显示与隐藏currentArticle: {} // 当前编辑的文章}},methods: {search: function() {//发送请求,完成搜索,携带搜索条件axios.get('http://localhost:8080/article/search', {params: {category: this.searchConditions.category,state: this.searchConditions.state}}).then(result => {//成功回调 result.data//把得到的数据赋值给articleListthis.articleList = result.data;}).catch(err => {console.log(err);});},edit(index) {// 获取当前编辑的文章this.currentArticle = { ...this.articleList[index] }; // 复制当前文章数据this.isEditing = true; // 显示编辑模态框},del(index) {const article = this.articleList[index];axios.get('http://localhost:8080/article/del?id=' + article.id).then(result => {console.log(result.data);this.refreshArticles();}).catch(err => {console.log(err);});},updateArticle() {// 发送更新请求axios.post('http://localhost:8080/article/update', this.currentArticle).then(result => {console.log(result.data); // 打印更新成功的消息this.refreshArticles(); // 刷新文章列表this.cancelEdit(); // 关闭模态框}).catch(err => {console.log(err);});},cancelEdit() {this.isEditing = false; // 隐藏编辑模态框this.currentArticle = {}; // 清空当前文章},refreshArticles() {axios.get('http://localhost:8080/article/getAll').then(result => {this.articleList = result.data;}).catch(err => {console.log(err);});}},mounted() {this.refreshArticles(); // 初始化时获取所有文章数据}}).mount('#app');</script>
</body></html>

实现情况(搜索、编辑、删除)

在这里插入图片描述

前后端分析:

后端(Spring Boot):

@RestController:标识该类为 RESTful 控制器,返回的对象会自动序列化为 JSON 格式。
@RequestMapping(“/article”):定义请求的基础路径。
@CrossOrigin:允许跨域请求,这对于前后端分离的应用非常重要。
@RequestBody 注解将请求体中的 JSON 数据映射到 Article 对象。
后端的 Spring Boot 应用会接收到来自前端的请求。根据请求的 URL,Spring 会调用相应的处理方法。
对于获取所有文章的请求,调用 getAll() 方法,返回 articleList
返回的数据会被 Spring 自动转换为 JSON 格式并发送回前端。

前端(Vue 3 + Axios):

data() 中定义了 articleList 和 searchConditions。
search 方法通过 Axios 发送 GET 请求以获取符合条件的文章,并将结果赋值给 articleList。这个请求会向后端发送一个带有查询参数的 HTTP GET 请求,获取符合条件的文章数据。
mounted 钩子函数在组件加载时获取所有文章数据,发送 GET 请求以获取所有文章数据,这个请求会触发浏览器向后端服务器发送一个 HTTP GET 请求,要求获取所有文章的信息

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/881628.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

连接redis哨兵碰到的一些问题

1.Could not get a resource from the pool 可以跟进对应的getResource方法&#xff0c;看下这个问题的具体异常是什么&#xff0c;如NOAUTH Authentication required&#xff0c;这种异常就是说明了漏配置了redis的密码&#xff0c;补充下就好。 2. java.lang.NoSuchMethodE…

【花卉识别系统】Python+卷积神经网络算法+人工智能+深度学习+图像识别+算法模型

一、介绍 花朵识别系统。本系统采用Python作为主要编程语言&#xff0c;基于TensorFlow搭建ResNet50卷积神经网络算法模型&#xff0c;并基于前期收集到的5种常见的花朵数据集&#xff08;向日葵、玫瑰、蒲公英、郁金香、菊花&#xff09;进行处理后进行模型训练&#xff0c;最…

SpringBoot基础(一)

5.注解Configuration 标注一个类为配置类 6.注解Bean 用Bean标注方法等价于XML中配置的bean Configuration //容器启动时加载 public class AppBootConfig {//创建bean实例 别名为stuBean(name "stu")public Student getStudent(){Student stu new Student();s…

GitHub简介与安装使用入门教程

1、Git与GitHub的简介 Git是目前世界上最先进的分布式控制系统&#xff0c;它允许开发者跟踪和管理源代码的改动历史记录等&#xff0c;可以将你的代码恢复到某一个版本&#xff0c;支持多人协作开发。它的核心功能包括版本控制、分支管理、合并和冲突解决等&#xff0c;其操作…

PHP系统中502 的原因及解决方法

在PHP系统中&#xff0c;502错误通常表示网关错误&#xff0c;即服务器作为网关或代理&#xff0c;从上游服务器收到无效响应。这种错误可能由多种原因引起&#xff0c;以下是一些常见的原因及相应的解决方法&#xff1a; 原因及解决方法 PHP-FPM进程问题 进程崩溃&#xff1a…

【原创】java+springboot+mysql疫苗追踪管理系统设计与实现

个人主页&#xff1a;程序猿小小杨 个人简介&#xff1a;从事开发多年&#xff0c;Java、Php、Python、前端开发均有涉猎 博客内容&#xff1a;Java项目实战、项目演示、技术分享 文末有作者名片&#xff0c;希望和大家一起共同进步&#xff0c;你只管努力&#xff0c;剩下的交…

【机器学习】——神经网络与深度学习:从基础到应用

文章目录 神经网络基础什么是神经网络&#xff1f;神经网络的基本结构激活函数 深度学习概述什么是深度学习&#xff1f;常见的深度学习算法 深度学习的工作流程深度学习的实际应用结论 引言 近年来&#xff0c;神经网络和深度学习逐渐成为人工智能的核心驱动力。这类模型模仿人…

uni-app 拍照图片添加水印

获取图片信息 uni.chooseImage({count: 6, //默认9sizeType: ["original", "compressed"], //可以指定是原图还是压缩图&#xff0c;默认二者都有sourceType: ["camera"], //从相册选择success: async function (result: any) {if (!props.isMar…

2024最新版安装教程!Python安装+PyCharm安装使用教程!!(非常简单)

Python下载安装 一、进入Python官网首页&#xff0c;下载最新版的Python 官方网址&#xff1a;Download Python | Python.org 鼠标悬浮在Downloads&#xff0c;选择最新版本 注意&#xff1a;由于Python官网服务器设立在国外&#xff0c;所以下载速度非常慢&#xff0c;我这…

STM32 SPI串行总线

目录 STM32的SPI通信原理 SPI串行总线概述 SPI串行总线互连方式 STM32F1 SPI串行总线的工作原理 SPI串行总线的特征 SPI串行总线的内部结构 SPI串行总线时钟信号的相位和极性 STM32的SPI接口配置 STM32的SPI接口数据发送与接收过程 SPI的HAL 驱动函数 STM32的SPI通信…

Oracle Linux 9 (CentOS Stream 9) 安装 node.js 20

Oracle Linux 的 node 默认版本为 16&#xff0c;运行dnf update也无法改变大版本&#xff0c;还需要进行额外操作1 查看支持的版本 sudo dnf module list nodejs输出如下 Last metadata expiration check: 3:37:22 ago on Fri 11 Oct 2024 09:08:18 PM JST. Oracle Linux 9 Ap…

Linux高级编程_32_磁盘映射

文章目录 磁盘映射相关函数mmap函数作用&#xff1a; munmap函数作用&#xff1a; truncate 函数作用&#xff1a; 语法&#xff1a;使用步骤&#xff1a; 磁盘映射 概述&#xff1a; > 存储映射 I/O (Memory-mapped I/O) 使一个磁盘文件与存储空间中的一个缓冲区相映射。…

H7-TOOL的LUA小程序教程第14期:任意波形信号发生器,0-20mA输出和微型数控电源(2024-10-11,已更新)

LUA脚本的好处是用户可以根据自己注册的一批API&#xff08;当前TOOL已经提供了几百个函数供大家使用&#xff09;&#xff0c;实现各种小程序&#xff0c;不再限制Flash里面已经下载的程序&#xff0c;就跟手机安装APP差不多&#xff0c;所以在H7-TOOL里面被广泛使用&#xff…

Springmvc Thymeleaf 标签

Thymeleaf是一个适用于Java的模板引擎&#xff0c;它允许开发者将动态内容嵌入到HTML页面中。在SpringMVC框架中&#xff0c;Thymeleaf可以作为一个视图解析器&#xff0c;使得开发者能够轻松地创建动态网页。以下是关于SpringMVC中Thymeleaf标签的详细介绍&#xff1a; 一、T…

vue3学习:数字时钟遇到的两个问题

在前端开发学习中&#xff0c;用JavaScript脚本写个数字时钟是很常见的案例&#xff0c;也没什么难度。今天有时间&#xff0c;于是就用Vue的方式来实现这个功能。原本以为是件非常容易的事&#xff0c;没想到却卡在两个问题上&#xff0c;一个问题通过别人的博文已经找到答案&…

如何解决Elasticsearch容器因“Connection refused”导致的问题

在使用Elasticsearch时&#xff0c;尤其是将Elasticsearch部署在Docker容器中&#xff0c;可能会遇到连接被拒绝&#xff08;Connection refused&#xff09;的情况。 1. 问题现象 在执行Python脚本或其他操作时&#xff0c;可能会遇到如下错误提示&#xff1a; elasticsear…

使用 `netcat`(nc)工具进行TCP数据发送和接收

Netcat&#xff08;通常缩写为nc&#xff09;是一个功能强大的网络工具&#xff0c;常被称为“瑞士军刀”的网络工具。它用于在网络上进行各种操作&#xff0c;比如读写网络连接、调试和分析网络服务等。以下是关于Netcat的一些详细介绍&#xff1a; ### 主要功能 1. **TCP/U…

Java—继承性与多态性

目录 一、this关键字 1. 理解this 2. this练习 二、继承性 2.1 继承性的理解 2.1.1 多层继承 2.2 继承性的使用练习 2.2.1 练习1 2.2.2 练习2 2.3 方法的重写 2.4 super关键字 2.4.1 子类对象实例化 三、多态性 3.1 多态性的理解 3.2 向下转型与多态练习 四、Ob…

03 django管理系统 - 部门管理 - 部门列表

部门管理 首先我们需要在models里定义Dept类 # 创建部门表 class Dept(models.Model):name models.CharField(max_length100)head models.CharField(max_length100)phone models.CharField(max_length15)email models.EmailField()address models.CharField(max_length2…

使用verilog设计实现简单神经网络加速器及其仿真

以下是使用FPGA实现简单神经网络加速器的基本步骤: **一、神经网络模型选择与简化** 1. **选择合适的神经网络模型** - 对于简单的神经网络加速器,可以选择多层感知机(MLP)作为基础模型。MLP由输入层、隐藏层和输出层组成,各层之间通过全连接方式连接。 - 例如,构…