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

Axios 快速入门

news 2026/3/26 13:31:59

什么是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

ARM A53上跑通1080P实时EIS防抖？手把手教你优化特征点与透视变换（附代码思路）

ARM A53实战&#xff1a;1080P实时EIS防抖的7个关键优化策略 当行车记录仪的镜头在颠簸路面剧烈晃动&#xff0c;或是运动相机在冲浪时被海浪拍打&#xff0c;画面稳定性的价值就凸显出来。传统光学防抖受限于物理结构&#xff0c;而电子防抖(EIS)通过算法补偿成为嵌入式设备的…...

编程新知 2026/3/26 13:18:57

小米Pad 5 Windows驱动完整配置指南：解锁平板的桌面级生产力

小米Pad 5 Windows驱动完整配置指南&#xff1a;解锁平板的桌面级生产力 【免费下载链接】MiPad5-Drivers Based on Surface Duo Drivers. 项目地址: https://gitcode.com/gh_mirrors/mi/MiPad5-Drivers 想要让小米Pad 5变身真正的生产力工具吗&#xff1f;这款基于高通…...

编程新知 2026/3/26 12:58:49

LFM2.5-1.2B-Thinking-GGUF环境配置：Docker内服务端口映射与外网访问调试

LFM2.5-1.2B-Thinking-GGUF环境配置&#xff1a;Docker内服务端口映射与外网访问调试 1. 平台简介与核心优势 LFM2.5-1.2B-Thinking-GGUF是Liquid AI推出的轻量级文本生成模型&#xff0c;专为低资源环境优化设计。该镜像内置GGUF模型文件和llama.cpp运行时&#xff0c;提供简…...

编程新知 2026/3/26 11:39:57

Alpamayo-R1-10B入门必看：VLA模型与传统端到端/模块化架构的本质差异

Alpamayo-R1-10B入门必看&#xff1a;VLA模型与传统端到端/模块化架构的本质差异 1. 引言&#xff1a;自动驾驶决策的十字路口 想象一下&#xff0c;你正在教一个新手司机开车。传统的方法有两种&#xff1a;一种是让他死记硬背所有交通规则和操作步骤&#xff08;模块化&…...

编程新知 2026/3/26 11:33:56

java毕业设计基于springboot+vue的自贡恐龙博物馆门户系统

前言 该系统采用前后端分离 的架构模式&#xff0c;后端使用Spring Boot框架构建&#xff0c;前端则使用Vue.js等框架来构建友好的用户界面。这种架构模式使得开发团队可以独立进行前后端的开发与维护&#xff0c;从而提高开发效率。一、项目介绍 开发语言&#xff1a;Java 框架…...

编程新知 2026/3/26 11:31:56

3步掌握DoL-Lyra整合包：从零到精通的完整指南

3步掌握DoL-Lyra整合包&#xff1a;从零到精通的完整指南 【免费下载链接】DOL-CHS-MODS Degrees of Lewdity 整合 项目地址: https://gitcode.com/gh_mirrors/do/DOL-CHS-MODS Degrees of Lewdity中文整合包DoL-Lyra为您提供了一站式的游戏体验解决方案。这个自动化构建…...

编程新知 2026/3/26 9:20:49

告别AI人像翻车！MusePublic艺术创作引擎保姆级入门教程

告别AI人像翻车&#xff01;MusePublic艺术创作引擎保姆级入门教程 &#x1f3db; MusePublic 艺术创作引擎是一款专为艺术感时尚人像创作设计的轻量化文本生成图像系统&#xff0c;基于MusePublic专属大模型&#xff0c;采用safetensors安全格式封装&#xff0c;深度优化优雅…...

编程新知 2026/3/26 9:14:47

高效解决图表数据提取难题：WebPlotDigitizer全功能解析

高效解决图表数据提取难题&#xff1a;WebPlotDigitizer全功能解析 【免费下载链接】WebPlotDigitizer WebPlotDigitizer: 一个基于 Web 的工具&#xff0c;用于从图形图像中提取数值数据&#xff0c;支持 XY、极地、三角图和地图。 项目地址: https://gitcode.com/gh_mirror…...

编程新知 2026/3/26 8:44:35

Qwen3智能字幕对齐系统在CSDN技术视频生态中的应用实践

Qwen3智能字幕对齐系统在CSDN技术视频生态中的应用实践 1. 引言 做技术视频的博主和讲师们&#xff0c;应该都遇到过这样的烦恼吧。辛辛苦苦录完一个小时的编程教程&#xff0c;光是剪辑和加字幕就得再花上大半天。尤其是字幕&#xff0c;要么得自己一句一句听写&#xff0c;…...

编程新知 2026/3/26 8:00:27

别再乱用#0延迟了！一个SystemVerilog仿真波形出现X态的踩坑实录

SystemVerilog仿真中的X态陷阱&#xff1a;从#0延迟到事件队列的深度解析 引言&#xff1a;一个令人抓狂的仿真问题 上周五凌晨2点17分&#xff0c;我的显示器上VCS仿真波形中那个刺眼的红色X态信号让我彻底清醒了。这已经是第三次在项目交付前遇到这种诡异的仿真问题——明明R…...

编程新知 2026/3/26 7:48:25