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

Axios 快速入门

news 2026/2/7 12:11:23

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

超短脉冲激光自聚焦效应

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

编程新知 2026/2/4 16:43:14

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

编程新知 2026/1/30 13:40:43

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2026/2/7 0:28:16

（转）什么是DockerCompose?它有什么作用？

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

编程新知 2026/1/31 22:59:12

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

编程新知 2026/2/6 11:41:39

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/11/8 15:39:00

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

编程新知 2025/10/20 4:39:36

LLMs 系列实操科普（1）

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

编程新知 2026/1/31 11:35:24

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师（题目+回答）

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

编程新知 2026/1/27 2:41:27

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...

编程新知 2026/1/28 4:50:33