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

Axios 快速入门

news 2025/7/8 7:23:46

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

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2025/7/7 5:29:47

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2025/7/7 13:25:45

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

编程新知 2025/6/21 5:31:03

Zustand 状态管理库：极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

编程新知 2025/7/7 17:15:44

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

编程新知 2025/7/2 18:06:11

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

编程新知 2025/7/8 5:31:36

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

编程新知 2025/7/7 12:21:55

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

编程新知 2025/7/2 22:42:45

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

编程新知 2025/6/21 6:25:06

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

编程新知 2025/7/5 18:24:10