深入浅出掌握 Axios(持续更新)

在了解ajax和axios之前，我们先观察一下他们是什么英文的缩写

ajax 的名字为 asynchroanous JavaScript and XML

而axios的名称来源于英文单词“axis”与“I/O”的结合，并非直接缩写自某个特定短语。

先导知识

在本文我们简单的介绍一下ajax后着重讲解axios，在平时工作中因为ajax配置较为底层，代码相对冗长，所以我们使用更为现代化的axios

Axios是一个基于Promise的HTTP客户端库，专为浏览器和Node.js设计。其优势包括：

  • 简洁的API设计，支持Promise链式调用。
  • 自动转换JSON数据，拦截请求和响应。
  • 提供取消请求、超时控制等高级功能。

到底什么是基于promise？请看一下博主的上一篇文章Javascript异步代码处理-CSDN博客

我们在这里简单的介绍一下：Promise是JavaScript中用于处理异步操作的编程构造。它表示一个异步操作的最终完成（成功或失败）及其结果值。最重要的是理解异步操作。

还有一个重点需要了解的是HTTP请求，此知识在各大网站均可搜到浅谈HTTP中Get、Post、Put与Delete的区别_联想如何跳过联网-CSDN博客，先确保自己了解清楚后再开始axios的学习。

在传统的网页开发中，每次我们点击一个链接或按钮跳转到另一个页面时，浏览器会重新加载整个页面。这个过程会出现短暂的白屏现象（页面内容完全空白），这是因为浏览器正在等待从服务器加载新的页面内容。

为了改善这种用户体验，开发者通常会尝试优化网络传输速度，比如压缩资源文件、使用缓存、开启CDN等方式来减少白屏时间。但无论我们怎么优化网络传输，总还会有一个过程是“清空页面 → 加载新页面”，这就不可避免地会出现白屏。

另外，传统的网页更新方式也存在一个效率问题：哪怕只需要更改页面上的一小部分内容，也必须整个页面重新加载。这不仅浪费资源，也让用户等待的时间变长。

在构建现代web项目的时候，前端与后端之间亲密的数据交互是重要的核心环节。而我们就是采用AJAX技术来实现这种数据交互的过程的。虽然浏览器本身已经提供了XMLHttpRequest和fetch()等等方式，但是他们或多或少存在复杂，兼容性不一等等的问题。

于是我们采用一个更强大，更友好，更灵活的AJAX封装库--Axios

在开始之前我们先了解如何引入axios在我们的项目中

如果你用的是前端构建工具（如 Vite、Webpack、Vue CLI）：

npm install axios  或者 yarn add axios

CDN 引入（适合纯 HTML 页面）：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

引入后，请你记住，我们引入axios的目的就是来实现异步请求的，异步就是异步，请求有很多种。

同步

在了解异步之前我们先学习一下什么是同步，我们并不举一些生活的例子，直接使用代码方面的解释什么是同步：代码按顺序一行一行执行，每一行都必须等上一行执行完成后才能继续执行下一行。

console.log('1');
console.log('2');
console.log('3');
代码输出结果只能是123，而不会是其他情况

异步

现在我们考虑一下异步，在异步模式中，某些操作不会立即完成（比如网络请求、定时器等），它们会先挂起或排队等待执行，程序会继续执行后面的代码，而不是等待异步操作完成。

console.log('开始模拟请求');

    setTimeout(()=>{

        console.log('请求中')

    },2000)

    console.log('请求已经发送');

考虑这段代码，按照我们初学者所想，输出结果就应该是 开始模拟请求->请求中->请求已经发送

但下面控制台输出结果并非如此。

关键就在于：setTimeout 是异步的。

  • 当 JavaScript 执行到 setTimeout 时，它不会等里面的代码执行完再往下走。

  • 它会将回调函数（console.log('请求中')）注册到“任务队列”中，然后继续执行后面的代码。

  • 等到 定时器时间到了（这里是2秒），并且主线程空闲时，那个回调才会执行。

到这里我们已经理解了异步的核心思想

异步就是：你启动了一件任务，但不会等它完成才做下一件事。它不会“阻塞”后续代码的执行，而是“等你有空再处理这件事”。

Axios

上文讲到引入axios是完成异步请求的，我们异步已经搞明白了，现在我们来仔细分析一下请求

我们使用axios请求，其实是浏览器在背后通过HTTP协议向服务器发送请求并等待响应

包括以下两个核心部分：

请求(Request): 你告诉服务器我要什么

响应(Response)：服务器告诉你这是你要的内容

常见的请求类型（也叫“方法”）有这些：

方法用途示例
GET获取数据获取文章、用户信息等
POST发送数据（新增）提交表单、注册用户等
PUT更新数据修改用户资料等
PATCH部分更新数据修改一个字段
DELETE删除数据删除评论、记录等

我们现在用一个简单的文章小系统来了解Axios的基础用法(请注意我们不会把代码一股脑全考上来，也不会实打实就写代码，而是通过这个项目的流程来熟悉一下axios而已)

我们要构建一个简单的“文章管理系统”，包含以下功能：

  •  获取文章列表

  •  发布新文章

  •  修改已有文章

  •  删除文章

这些功能刚好对应 Axios 中最常用的四种请求方法：GET、POST、PUT、DELETE。

先说白了，get从哪里get，又post到哪里

  • get 是从 服务器的某个接口（URL） 请求数据

  • post 是把数据 发送到服务器的某个接口（URL）

而这个时候API接口文档就显得十分重要了

Restful API 接口规范详解-腾讯云开发者社区-腾讯云

我们可以使用 json-server 快速搭建本地 REST API

1. 安装 json-server

npm install -g json-server

 2. 创建模拟数据 db.json

在你的项目根目录创建一个文件：db.json

 3. 启动服务

json-server --watch db.json --port 3000

它会自动创建出一组 完整的 RESTful 接口：

功能请求方法地址
获取所有文章GEThttp://localhost:3000/posts
获取指定文章GEThttp://localhost:3000/posts/1
添加文章POSThttp://localhost:3000/posts
修改文章PUThttp://localhost:3000/posts/1
删除文章DELETEhttp://localhost:3000/posts/1

4. 示例代码：使用 Axios 测试

axios.get('http://localhost:3000/posts') // 获取文章 axios.post('http://localhost:3000/posts', { title: '测试文章', content: '这是一个模拟添加的文章' });

Axios基本语法学习/复习

了解基本语法之前我们需要学习headers、params，也就是请求头和请求体的内容

语法形式（通用）

axios(config)
axios({method: 'get',       // 请求方法（get/post/put/delete）url: '/api/posts',   // 请求地址params: { id: 1 },   // URL 查询参数（自动拼接成 ?id=1）data: { title: '标题' }, // 请求体数据（POST/PUT 用）headers: { 'X-Custom': 'value' }, // 自定义请求头timeout: 5000        // 超时设置（单位毫秒）
})

各方法语法和参数

1. axios.get(url, config)

  • url：请求地址

  • config：配置对象（headers、params 等）

axios.get('/api/posts', {params: { id: 1 },headers: { Authorization: 'Bearer token' }
});

2. axios.post(url, data, config)

  • url：请求地址

  • data：请求体（body）内容

  • config：附加配置

axios.post('/api/posts', {title: '新文章',content: '内容'
});

3. axios.put(url, data, config)

axios.put('/api/posts/1', {title: '修改标题'
});

4. axios.delete(url, config)

axios.delete('/api/posts/1');

5. axios.patch(url, data, config)

用于局部更新资源

axios.patch('/api/posts/1', {title: '只修改标题'
});

返回值：Axios 响应结构

Axios 所有请求都会返回一个 Promise，你可以用 .then() 处理返回值：

axios.get('/api/posts/1').then(response => {console.log(response.data);       // 服务器返回的数据console.log(response.status);     // 状态码，如 200console.log(response.headers);    // 响应头console.log(response.config);     // 请求配置信息}).catch(error => {console.error(error.response);    // 错误响应对象});

Axios 特性汇总

特性说明
基于 Promise支持链式调用、async/await 使用
自动 JSON 转换自动将请求数据转为 JSON，也自动解析响应 JSON
默认 GET 请求默认 method 是 get，除非你设置为 post 等
跨浏览器兼容性强能在所有主流浏览器中使用
支持请求/响应拦截器可在请求发出前或收到响应后处理逻辑
取消请求支持 CancelToken 取消请求
防止 XSRF 攻击自动从 Cookie 获取 token 设置到请求头
统一配置可通过 axios.create() 创建实例统一配置

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

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

相关文章

windows10下搭建nfs服务器

windows10下搭建nfs服务器

windows10下搭建nfs服务器 有参考这篇博客 Windows10搭建NFS服务 - fuzidage - 博客园 下载 NFS Server这个app 通过网盘分享的文件&#xff1a;nfs1268 (1).exe 链接: https://pan.baidu.com/s/1rE4h710Uh-13kWGXvjkZzw 提取码: mwa4 --来自百度网盘超级会员v5的分享 下载后…
阅读更多...
npm符号链接

npm符号链接

前言 最近在写一个快应用项目&#xff0c;demo中依赖了本地文件&#xff0c;package.json如下&#xff1a; 此时 node_modules 下出现了 mysdk&#xff0c;复制整个项目&#xff0c;但是copy的项目中的node_modules并未出现该文件&#xff0c;导致报错。 解决方案 观察 pa…
阅读更多...
SQL 中 IDENTITY 列的特殊处理.

SQL 中 IDENTITY 列的特殊处理.

SQL 处理中,遇到提示: "消息 544，级别 16，状态 1，第 3 行 当 IDENTITY_INSERT 设置为 OFF 时，不能为表 BM 中的标识列插入显式值。" 即当 SQL Server 表中的 ​​标识列（Identity Column）​​ 插入显式值，但未启用 IDENTITY_INSERT 选项。由此报错,以下是详…
阅读更多...
网络安全等级保护中关于SSL证书的整改如何处理？

网络安全等级保护中关于SSL证书的整改如何处理？

SSL证书在网络安全等级保护&#xff08;等保&#xff09;体系中扮演着至关重要的角色&#xff0c;是实现多个等保核心要求&#xff08;尤其是三级及以上&#xff09;的关键技术手段之一。其重要性主要体现在以下几个方面&#xff1a; 满足“身份鉴别”要求&#xff08;等保要求…
阅读更多...
Docker容器化打造elasticsearch8.18.2集群企业实战（含kibana+证书认证）

Docker容器化打造elasticsearch8.18.2集群企业实战（含kibana+证书认证）

主机信息 主机配置4Core8GB硬盘大于80GB 主机名IP地址角色10-0-17-12310.0.17.123es-node110-0-17-15810.0.17.158es-node2kibana-15610.0.17.156kibana 一、环境准备 1. 安装 Docker 这里就不介绍如何安装docker了&#xff0c;本文docker版本为20 2. 主机名与网络与内核配置…
阅读更多...
JAVA语言的学习（Day_1）

JAVA语言的学习（Day_1）

写一个项目并运行&#xff1a; 第一步&#xff1a;新建一个.txt文本。右击点开用Notepad打开&#xff0c;并编辑。 编辑并保存后&#xff0c;可以在文件的查看中&#xff0c;显示出文件的类型&#xff08;eg: .txt / .java)。将txt文本的.txt类型改为.java。 之后在下面的截…
阅读更多...
JS 原型与原型链详解

JS 原型与原型链详解

JavaScript 原型与原型链详解 文章目录 JavaScript 原型与原型链详解一、基础概念类1.1 什么是原型&#xff1f;JavaScript 中如何访问一个对象的原型&#xff1f;1.2 构造函数、实例对象和原型对象之间的关系是什么&#xff1f;1.3 prototype 和 **proto** 的区别是什么&#…
阅读更多...
DEVICENET转MODBUS TCP网关连接DeviceNet数字远程IO模块配置案例

DEVICENET转MODBUS TCP网关连接DeviceNet数字远程IO模块配置案例

设备与网络架构&#xff0c;主控设备&#xff1a;支持Modbus TCP协议的PLC&#xff08;如西门子S7-1200&#xff09;。网关设备&#xff1a;开疆智能Modbus TCP转DeviceNet网关KJ-DVCZ-MTCPS&#xff08;需支持DeviceNet从站功能&#xff09;。目标设备&#xff1a;DeviceNet数…
阅读更多...
Ubuntu下使用PyTurboJPEG加速图像编解码

Ubuntu下使用PyTurboJPEG加速图像编解码

目录 一、概述 二、安装PyTurboJPEG 三、测试 一、概述 在计算机视觉领域&#xff0c;图像编解码是绕不开的基础环节。虽然 OpenCV 能解决大部分图像处理问题&#xff0c;但在性能要求严苛的场景下存在短板。本文将介绍基于 libjpeg-turbo 的高效 JPEG 编解码库 PyTurboJPE…
阅读更多...
MCU、MPU、GPU、Soc、DSP、FPGA、CPLD……它们到底是什么？

MCU、MPU、GPU、Soc、DSP、FPGA、CPLD……它们到底是什么？

MCU、MPU、GPU、Soc、DSP、FPGA、CPLD…… 这些简称在各大论坛、会议、发布会中屡见不鲜&#xff0c;看到简称&#xff0c;虽然也能说出大概&#xff1b; 但要问具体是什么&#xff1f;用在什么场景&#xff1f;又有什么区别……好像还是差点意思&#xff1b;本篇文章就记录一…
阅读更多...
Django RBAC项目后端实战 - 03 DRF权限控制实现

Django RBAC项目后端实战 - 03 DRF权限控制实现

项目背景 在上一篇文章中&#xff0c;我们完成了JWT认证系统的集成。本篇文章将实现基于Redis的RBAC权限控制系统&#xff0c;为系统提供细粒度的权限控制。 开发目标 实现基于Redis的权限缓存机制开发DRF权限控制类实现权限管理API配置权限白名单 前置配置 在开始开发权限…
阅读更多...
[网页五子棋][用户模块]数据库设计和配置(MyBatis)、约定前后端交互接口、服务器开发

[网页五子棋][用户模块]数据库设计和配置(MyBatis)、约定前后端交互接口、服务器开发

文章目录 数据库数据库设计配置 MyBatis1. Spring 配置2. 创建实体类3. 创建 Mapper 接口4. 使用 MyBatis 约定前后端交互接口登录接口注册接口获取用户信息 服务器开发loginregistergetUserInfo完整代码 数据库 数据库设计 完成注册登录以及用户分数管理 使用数据库来保存上…
阅读更多...
Qt/C++学习系列之列表使用记录

Qt/C++学习系列之列表使用记录

Qt/C学习系列之列表使用记录 前言列表的初始化界面初始化设置名称获取简单设置 单元格存储总结 前言 列表的使用主要基于QTableWidget控件&#xff0c;同步使用QTableWidgetItem进行单元格的设置&#xff0c;最后可以使用QAxObject进行单元格的数据读出将数据进行存储。接下来…
阅读更多...
防火墙通常可以分为哪些类型？

防火墙通常可以分为哪些类型？

防火墙是目前保护网络安全的重要设备&#xff0c;能够通过监控、过滤和控制进出网络的数据流量&#xff0c;来保护内部网络不会受到未经授权的IP地址进行访问和恶意的网络威胁&#xff0c;设置防火墙能够帮助企业确保网络的安全性&#xff0c;同时防火墙也会根据不同的功能来划…
阅读更多...
基于GeoTools的道路相交多个点容差冗余计算实战

基于GeoTools的道路相交多个点容差冗余计算实战

目录 前言 一、关于道路相交 1、相交四个点 2、点更多的情况 二、基于距离的相交点去重 1、冗余距离计算 2、调用过程 3、去重后的结果 三、总结 前言 在地理信息系统&#xff08;GIS&#xff09;领域&#xff0c;道路网络数据的处理与分析一直是关键课题。随着城市化进…
阅读更多...
android:foregroundServiceType详解

android:foregroundServiceType详解

在 Android 中&#xff0c;foregroundServiceType 是用于声明前台服务类型的属性&#xff0c;主要从 Android 10&#xff08;API 29&#xff09;开始引入&#xff0c;并在 Android 11&#xff08;API 30&#xff09;及更高版本 中进一步细化。以下是所有可用的 foregroundServi…
阅读更多...
React+Taro 微信小程序做一个页面，背景图需贴手机屏幕最上边覆盖展示

React+Taro 微信小程序做一个页面，背景图需贴手机屏幕最上边覆盖展示

话不多说 直接上图 第一步 import { getSystemInfoSync } from tarojs/taro;第二步 render() {const cardBanner getImageUrlByGlobal(member-merge-bg.png);const { safeArea, statusBarHeight } getSystemInfoSync();const NAV_BAR_HEIGHT 44;const navBarHeight NAV…
阅读更多...
从零开始的云计算生活——番外，实战脚本。

从零开始的云计算生活——番外，实战脚本。

目录 题目一&#xff1a;系统信息收集脚本 题目二&#xff1a;用户管理配置脚本 题目三&#xff1a;磁盘空间管理脚本 题目四&#xff1a;网络配置检查脚本 题目五&#xff1a;系统日志分析脚本 题目一&#xff1a;系统信息收集脚本 编写一个脚本名为 collect_system_info…
阅读更多...
MySQL基础知识（DDL、DML）

MySQL基础知识（DDL、DML）

什么是数据库&#xff1f; 数据库&#xff1a;英文为 DataBase&#xff0c;简称DB&#xff0c;它是存储和管理数据的仓库。 注释&#xff1a; 单行注释&#xff1a;-- 注释内容 或 # 注释内容(MySQL特有)多行注释&#xff1a; /* 注释内容 */ 分类 SQL语句根据其功能被分为…
阅读更多...
用volatile修饰数组代表什么意思，Java

用volatile修饰数组代表什么意思，Java

文章目录 volatile 修饰数组引用的含义volatile 对数组元素无效总结 如何让数组元素也具有 volatile 特性&#xff1f; 当用 volatile 关键字修饰一个数组时&#xff0c;它只保证数组引用的可见性和部分原子性&#xff0c;而不保证数组元素的可见性和原子性。 换句话说&#x…
阅读更多...
最新文章

Copyright @ 2022~2023