当前位置： 首页 > news >正文

Axios 快速入门

news 2025/11/6 21:25:04

什么是Ajax

        Ajax 是一种通过 JavaScript 发送异步请求的技术，它的核心是使用 XMLHttpRequest 对象来与服务器交换数据。这种方式较为繁琐，因为需要手动处理请求状态和响应，并且编写的代码往往比较冗长。

        相较之下，Axios 是一个基于 Promises 的 HTTP 客户端，简化了发送请求的过程，使得处理 HTTP 请求更加直观和便捷。Axios 封装了 XMLHttpRequest，并提供了一系列功能，例如请求和响应拦截、自动转换 JSON 数据等。

同步与异步 

在编程中，异步和同步是两种处理操作的方式：

  • 同步（Synchronous）：在同步操作中，代码会按照顺序逐行执行，后面的代码必须等待前面的代码执行完成，这样会导致页面阻塞。

  • 异步（Asynchronous）：异步操作允许代码在等待的同时继续执行其他任务。当任务完成后，会通过回调函数或 Promise 等机制处理结果。这种方式使得用户体验更加流畅，在进行网络请求时尤其重要。

        Axios 是一个专注于异步请求的库，通过使用 Promise，让开发者能够更容易地处理异步操作。例如，下面是使用 Axios 发送 GET 请求的代码：

axios.get('https://jsonplaceholder.typicode.com/todos/1').then((result) => {console.log(result.data);}).catch((error) => {console.error(error);});

在这个例子中，通过 then() 和 catch() 方法，我们可以清晰地处理请求成功与失败的情况。 

Axios

通过Axios发送异步请求

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Axios入门</title><script src="js/axios.js"></script>
</head>
<body><input type="button" value="发送请求get" onclick="get()"><input type="button" value="发送请求post"onclick="post()"><script>//通过axios发送异步get请求function get() {axios({method: 'get',url: 'https://jsonplaceholder.typicode.com/todos/1'}).then((result) => {console.log(result.data);   })}//通过axios发送异步post请求function post() {axios({method: 'post',url: 'https://jsonplaceholder.typicode.com/todos',}).then((result) => {console.log(result.data);})}</script></body>
</html>

Axios发送异步请求

        Axios 提供了多种发送网络请求的方法，最常见的包括 GET 和 POST 请求。使用 Axios 可以非常简单地发送请求：

1. 发送 GET 请求

发送 GET 请求的方式非常简单，只需调用 axios.get() 方法。

function get() {axios.get('https://jsonplaceholder.typicode.com/todos/1').then((result) => {console.log(result.data);}).catch((error) => {console.error(error);});
}

2. 发送 POST 请求

        发送 POST 请求时，通过 axios.post() 方法可以轻松实现。可以在方法中传递数据作为第二个参数

function post() {axios.post('https://jsonplaceholder.typicode.com/todos', {title: '新任务',completed: false}).then((result) => {console.log(result.data);}).catch((error) => {console.error(error);});
}

在这个例子中，我们发送了一个包含任务标题和状态的 POST 请求，并处理了响应。

比较推荐的是用箭头函数和回调函数这种写法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Axios入门</title><script src="js/axios.js"></script>
</head>
<body><input type="button" value="发送请求get" onclick="get()"><input type="button" value="发送请求post"onclick="post()"><script>//通过axios发送异步get请求function get() {/* axios({method: 'get',url: 'https://jsonplaceholder.typicode.com/todos/1'}).then((result) => {console.log(result.data);   }) */axios.get('https://jsonplaceholder.typicode.com/todos/1').then((result) => {console.log(result.data);})}//通过axios发送异步post请求function post() {// axios({//     method: 'post',//     url: 'https://jsonplaceholder.typicode.com/todos',// }).then((result) => {//     console.log(result.data);// })axios.post('https://jsonplaceholder.typicode.com/todos').then((result) => {console.log(result.data);})}</script></body>
</html>

总结

        Axios 作为一个现代化的 HTTP 客户端库，相较于传统的 AJAX 技术，无论在语法还是功能上都有了显著的提升。它使得与服务器的异步交互变得更加容易，特别是在处理大量网络请求时，不仅提高了代码的可读性，也减轻了维护的难度。对于 Web 开发者来说，了解并掌握 Axios 的用法将极大地提升开发效率。

 

相关文章：

Axios 快速入门

什么是Ajax Ajax 是一种通过 JavaScript 发送异步请求的技术&#xff0c;它的核心是使用 XMLHttpRequest 对象来与服务器交换数据。这种方式较为繁琐&#xff0c;因为需要手动处理请求状态和响应&#xff0c;并且编写的代码往往比较冗长。 相较之下&#xff0c;Axios 是一个基于…...

编程日记 2024/10/8 18:34:18

LabVIEW提高开发效率技巧----调度器设计模式

在LabVIEW开发中&#xff0c;针对多任务并行的需求&#xff0c;使用调度器设计模式&#xff08;Scheduler Pattern&#xff09;可以有效地管理多个任务&#xff0c;确保它们根据优先级或时间间隔合理执行。这种模式在需要多任务并发执行时特别有用&#xff0c;尤其是在实时系统…...

编程日记 2024/10/8 18:33:16

python之认识变量

1、变量 1.1、定义 字面意思来看&#xff0c;会发生改变的量称为变量。 相反的&#xff0c;如果有一个不会发生改变的量&#xff0c;它应该称为不变量&#xff0c;即常量。 1.2、引入变量的原因 主要是为了方便程序员动态的管理、操控数据。 1.3、变量的三要素 名称 类型…...

编程日记 2024/10/8 18:32:15

c++应用网络编程之十Linux下的Poll模式

一、Poll模式 在上一篇文章中提到了Select模式的缺点。既然有缺点&#xff0c;就要改正。但是直接在Select模式上修改不太现实&#xff0c;那么就推出一个新的模式不更香么&#xff1f;poll模式就应运而生了。不过&#xff0c;罗马不是一天建成的&#xff0c;poll模式也只是对…...

编程日记 2024/10/8 18:29:11

[C++][第三方库][RabbitMq]详细讲解

目录 1.介绍2.安装1.RabbitMq2.客户端库 3.AMQP-CPP 简单使用1.介绍2.使用 4.类与接口1.Channel2.ev 5.使用1.publish.cc2.consume.cc3.makefile 1.介绍 RabbitMQ&#xff1a;消息队列组件&#xff0c;实现两个客户端主机之间消息传输的功能(发布&订阅)核心概念&#xff1…...

编程日记 2024/10/8 18:24:05

Next.js 详解

Next.js是一个基于React的开源JavaScript框架&#xff0c;由Vercel&#xff08;原Zeit&#xff09;公司开发。它旨在简化React应用的构建过程&#xff0c;并提供了一系列强大的功能来优化性能和开发体验。以下是对Next.js的详细解析&#xff1a; 一、核心特性 服务器端渲染&…...

编程日记 2024/10/8 18:23:04

pygame--超级马里奥（万字详细版）

超级马里奥点我下载https://github.com/marblexu/PythonSuperMario 1.游戏介绍 小时候的经典游戏&#xff0c;代码参考了github上的项目Mario-Level-1&#xff0c;使用pygame来实现&#xff0c;从中学习到了横版过关游戏实现中的一些处理方法。原项目实现了超级玛丽的第一个小…...

编程日记 2024/10/8 18:21:01

【运维】nginx静态代理资源403权限问题

如题&#xff0c;遇到静态代理资源访问403&#xff0c;可以尝试检查其文件权限&#xff0c;父目录权限&#xff0c;需要确保 "目录使用标准的 755&#xff0c;对文件使用 644&#xff08;umask&#xff1a;022&#xff09;" 参考资料&#xff1a; 1. nginx “403 …...

编程日记 2024/10/8 18:15:56

java家政预约上门系统源码，家政服务平台源码，基于SpringBoot框架，数据库使用MySQL，界面渲染采用Thymeleaf技术开发

自主知识产权的家政预约上门系统源码&#xff0c;java版本&#xff0c;支持二次开发&#xff0c;适合商用上项目。 在这个快节奏的现代生活中&#xff0c;越来越多的家庭开始寻求高效、便捷的家政服务解决方案。传统的家政服务模式已经很难满足人们日益增长的个性化与即时性需求…...

编程日记 2024/10/8 18:13:53

算法知识点————贪心

贪心&#xff1a;只考虑局部最优解&#xff0c;不考虑全部最优解。有时候得不到最优解。 DP&#xff1a;考虑全局最优解。DP的特点&#xff1a;无后效性&#xff08;正在求解的时候不关心前面的解是怎么求的&#xff09;&#xff1b; 二者都是在求最优解的&#xff0c;都有最优…...

编程日记 2024/10/8 18:12:51

python数据分析

Python是一种非常流行的编程语言&#xff0c;尤其在数据分析领域。Python拥有丰富的库和框架&#xff0c;可以帮助你执行各种数据分析任务。Python常用的数据分析工具之一&#xff1a;NumPy。 Numpy用于进行大规模数值和矩阵运算&#xff0c;提供了多维数组对象和一系列操作这…...

编程日记 2024/10/8 18:10:49

UGUI（现成组合控件）

Drop Down Scroll View Scroll Bar size是滚动条的填充程度 Slider 如果设置为静态&#xff0c;那么传入的值始终为自己设置的那个值 Input Field content type为standard时 可以设置line type&#xff0c; 只读不改&#xff0c;就是可以复制&#xff0c;但是你已经不能输入了…...

编程日记 2024/10/8 18:06:43

软件交付体系文件（Word源资料）

软件文档交付清单是指在软件开发项目完成后&#xff0c;开发团队需要准备的一份详细清单&#xff0c;用于确保交付的软件产品符合客户需求并达到预期的质量标准。以下是软件文档交付清单中可能包含的一些关键要素 软件全套资料部分文档清单&#xff1a; 工作安排任务书&#xf…...

编程日记 2024/10/8 18:05:41

【视频目标分割-2024CVPR】Putting the Object Back into Video Object Segmentation

Cutie 系列文章目录1 摘要2 引言2.1背景和难点2.2 解决方案2.3 成果 3 相关方法3.1 基于记忆的VOS3.2对象级推理3.3 自动视频分割 4 工作方法4.1 overview4.2 对象变换器4.2.1 overview4.2.2 Foreground-Background Masked Attention4.2.3 Positional Embeddings 4.3 Object Me…...

编程日记 2024/10/8 18:03:36

掌握 C# 文件和输入输出操作

在任何编程语言中&#xff0c;文件和输入输出操作&#xff08;I/O&#xff09;都是非常重要的组成部分。C# 提供了一系列工具和类来帮助开发者处理文件的读取、写入、二进制文件的处理以及数据的序列化与反序列化。本文将介绍 C# 中的文件操作&#xff0c;包括 File 类、Stream…...

编程日记 2024/10/8 18:02:35

k8s 中的金丝雀发布(灰度发布)

目录 1 什么是金丝雀发布 2 Canary 发布方式 3 Canary 两种发布方式实操 3.1 准备工作 3.1.1 将 nginx 命名两个版本 v1 与 v2 3.1.2 暴露端口并指定微服务类型 3.1.3 进入 pod 修改默认发布文件 3.1.4 测试 service 是否正常 3.2 基于权重的灰度发布 3.2.1 创建 Igress 资源类…...

编程日记 2024/10/8 18:01:34

《IDEA：让编程效率翻倍的强大工具》

哪个编程工具让你的工作效率翻倍&#xff1f; 在众多编程工具中&#xff0c;IntelliJ IDEA 无疑是一款让我的工作效率得到显著提升的利器。 一、功能特点 智能代码补全 IDEA 的代码补全功能极其智能。它不仅能根据你输入的前缀快速列出可能的代码选项&#xff0c;还会根据上…...

编程日记 2024/10/8 17:58:30

Docker 部署 Prometheus+Grafana 监控系统快速指南

Docker 部署 PrometheusGrafana 监控系统快速指南 文章目录 Docker 部署 PrometheusGrafana 监控系统快速指南一 创建网络二 监控部署三 配置 prometheus.yml四 测试部署是否成功五 Grafana表盘下载 本文详细介绍了通过 Docker 和 Docker Compose 快速部署 Prometheus 和 Grafa…...

编程日记 2024/10/8 17:56:27

No.8 笔记 | SQL 查询语句：数据探索的钥匙

2024/10/7 心记 - 致在路上默默奋斗的你 在当今数字化的时代&#xff0c;网络安全已成为我们生活中不可或缺的一部分。它如同守护数字世界的隐形盾牌&#xff0c;保护着我们的隐私、数据和整个社会的稳定运行。 学习网络安全&#xff0c;是踏上一段充满挑战与机遇的征程。 每一…...

编程日记 2024/10/8 17:55:26

全局数据在Python包中模块间管理方法探讨

在开发大型 Python 应用程序时&#xff0c;有时需要多个模块共享和管理全局数据。如何优雅地在 Python 包内的不同模块间共享全局数据是一个常见的设计问题。我们希望避免全局变量的混乱和难以维护的代码&#xff0c;但同时能够安全、高效地管理这些共享数据。 下面我们将探讨…...

编程日记 2024/10/8 17:54:25

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

编程新知 2025/11/6 10:22:39

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

编程新知 2025/11/3 20:11:31

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/9/7 11:32:34

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

编程新知 2025/10/23 14:31:06

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

编程新知 2025/11/4 16:08:05

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2025/11/6 0:52:38

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

编程新知 2025/10/3 22:08:23

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/11/5 4:54:32

Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

编程新知 2025/9/17 21:39:04

是否存在路径（FIFOBB算法）

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

编程新知 2025/10/1 6:09:21