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

4 前端前置技术（上）：AJAX技术、Axios技术（前端发送请求）

news 2025/11/12 4:06:31

文章目录

前言
一、Ajax技术（从服务端获取数据，发送各种请求）
- 0 接口文档管理：使用apipost等接口测试软件创建接口便于前端后端分离测试
- 1 基本概念
- 2 原生Ajax使用示例（几年前的早期用法）
二、 Axios技术(对原生的Ajax进行了封装)
- 1 基本概念
- - （1）Axios是什么
  - （2）常见的请求方式有哪些？
- 2 快速入门
- - 示例1：入门案例
  - 示例2：入门案例+绑定事件
- 3 Axios通用请求格式语法
- - 示例1：params传递参数发送get请求
  - 示例2：data传递参数发送post请求
  - 综合案例：地区查询
- 4 axios 错误处理

前言

本课程所有接口采用apifox模拟，全部使用的是
B站-AJAX和黑马头条-数据管理平台
这个里面的接口进行测试

一、Ajax技术（从服务端获取数据，发送各种请求）

参考视频
官方文档

0 接口文档管理：使用apipost等接口测试软件创建接口便于前端后端分离测试

参考视频

接口文档管理：
- 在线
  - apipost
  - apifox
  - postman等等
- 离线
  - word
  - md

在线的apipost这些测试工具功能很多，具体的后面不断深入学习慢慢了解这个测试工具，这个测试工具必须会用，后面无论是前端还是后端都需要频繁使用这个工具来进行测试。

下面的Ajax技术案例中的后端返回json数据都是通过这些接口工具的mock功能模拟生成的。

1 基本概念

学习本节前建议先去学习什么是GET、POST请求这些

概念: Asynchronous JavaScript And XML，异步的JavaScript和XML。
Ajax技术是一个异步交互技术，通过这个Ajax技术我们就可以从服务端获取数据
作用:
- 数据交换: 通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
- 异步交互: 可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如: 搜索联想、用户名是否可
  用的校验等等。
同步与异步请求区别
- 举一个例子就好理解了
  我们在点击某些页面的时候，如果网络不好界面就会一直卡在转圈圈的界面，我们不能进行任何操作，这就是同步请求；如果我们点击某些页面就算网络不好我们还是可以操作页面，例如我们下载文件这个请求就是典型的异步请求。
Ajax技术就是一项发送异步请求的技术了。

2 原生Ajax使用示例（几年前的早期用法）

太繁琐，现在已经淘汰，了解一下
可以使用网页版的apifox、或者apipost（个人感觉apifox更好用，界面更加清晰，apipost界面有点复杂，好多功能要摸索）生成一个get请求响应数据作为测试
使用
- （1）准备数据地址: http://hmajax.itheima.net/api/province
  示例接口文档：获取-省份列表
- （2）创建XMLHttpRequest对象: 用于和服务器交换数据
- （3）向服务器发送请求
- （4）获取服务器响应数据

示例：

<body><input type="button" value="获取数据" onclick = "getData()"><div id="div1"></div>
</body><script>function getData(){// 1 创建 XMLHttpRequest 对象var xmlHttpRequest = new XMLHttpRequest();// 2 发送异步请求xmlHttpRequest.open("GET","http://hmajax.itheima.net/api/province");xmlHttpRequest.send(); // 发送请求// 3 获取服务器响应的数据xmlHttpRequest.onreadystatechange = function(){if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){      // 判断服务器是否响应成功//var data = JSON.parse(xmlHttpRequest.responseText);document.getElementById("div1").innerHTML = xmlHttpRequest.responseText;// xmlHttpRequest.responseText ：返回服务器响应的数据，以字符串形式返回}}}</script>

查看结果：
在这里插入图片描述

代码解释
- 官方文档

二、 Axios技术(对原生的Ajax进行了封装)

1 基本概念

（1）Axios是什么

参考视频

介绍:Axios 对原生的Ajax进行了封装，简化书写，快速开发。
官网(使用文档等): https://www.axios-http.cn/
Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js

（2）常见的请求方式有哪些？

请求方法: 对服务器资源，要执行的操作
在这里插入图片描述

请求方法	操作
GET	获取数据
POST	提交数据
PUT	修改数据(全部)
DELETE	删除数据
PATCH	修改数据(部分)

比较常用的就是get和post请求，其余的说实话post请求好像也都能干

2 快速入门

step1: 引入Axios的js文件
<script src=“https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js”></script>
使用 axios 函数发送请求，并获取响应结果
（1）传入配置对象
（2）再用 .then 回调函数接收结果，并做后续处理
下面的语法，默认是get请求

示例1：入门案例

参考视频

需求: 请求目标资源地址，拿到省份列表数据，显示到页面
目标资源地址: http://hmajax.itheima.net/api/province
接口文档说明

<body><!--axios库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js省份数据地址：http://hmajax.itheima.net/api/province目标: 使用axios库, 获取省份列表数据, 展示到页面上1. 引入axios库--><p class="my-p"></p></body><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 2. 使用axios函数axios({url: 'http://hmajax.itheima.net/api/province'}).then(result => {console.log(result)// 好习惯：多打印，确认属性名console.log(result.data.list)console.log(result.data.list.join('<br>'))// 把准备好省份列表，插入到页面document.querySelector('.my-p').innerHTML = result.data.list.join('<br>') })</script>

结果：
在这里插入图片描述

示例2：入门案例+绑定事件

<body><!--axios库地址：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js省份数据地址：http://hmajax.itheima.net/api/province目标: 使用axios库, 获取省份列表数据, 展示到页面上1. 引入axios库--><body><input type="button" value="获取数据" onclick = "getData()"><div id="div1"></div></body></body><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>function getData(){// 通过axios发送异步请求,默认是GET请求axios({url: "http://hmajax.itheima.net/api/province"}).then(result =>{document.getElementById("div1").innerHTML = result.data.list.join('<br>');// 通过 result.data 获取服务器返回的的JSON对象})}</script>

结果：
在这里插入图片描述

3 Axios通用请求格式语法

通用请求格式语法

axios({method: 'post',        // 可以省略就是默认get请求, 大小写都可以 get\post\put\delete\patchurl: '/user/123',      // 注意 参数传递的那部分要写写到params里面去data: { ... },         // 写到这个里面的数据会直接发送出去, 例如json、xml等结构化数据都可以在这个里面发送出去params: { ... },       // 写到这个里面的请求参数会拼接到 url 中发送出去  http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
});

一般地：

url中要传递参数数据就写到params里面去，get,post方法可以
data里面可以传任何参数，特别是文件上传、json、xml等结构化数据都通过这个传，所以POST/PUT 数据会比较多
误区：params只能传递get数据、data只能传POST/PUT 数据（这个结合后端的接收请求接口就好理解了）
除了url，method，data，params都是可选项，根据实际情况判断是否要不要

具体的怎么发送还是要看后端接口是怎么写的
@RequestBody ：参数来源是请求体中的json等结构化数据
@RequestParam ：参数来源可以是url或者请求体的表单数据
@RequestPart：用于上传文件，参数来源是请求体中的表单数据
@PathVariable：参数来源是url中的路径变量

示例1：params传递参数发送get请求

语法: 使用 axios 提供的 params 选项
注意: axios 在运行时把参数名和值，会拼接到 url?参数名=值
城市列表: http://hmajax.itheima.net/api/city?pname=河北省

接口文档

<body><!-- 城市列表: http://hmajax.itheima.net/api/city参数名: pname值: 省份名字--><p></p><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>axios({url: 'http://hmajax.itheima.net/api/city',// 查询参数params: {pname: '辽宁省'}}).then(result => {console.log(result.data.list)document.querySelector('p').innerHTML = result.data.list.join('<br>')})</script>
</body>

结果：
在这里插入图片描述

示例2：data传递参数发送post请求

参考视频

需求：

接口文档

<body><button class="btn">注册用户</button><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*注册用户：http://hmajax.itheima.net/api/register请求方法：POST参数名：username：用户名（中英文和数字组成，最少8位）password：密码  （最少6位）目标：点击按钮，通过axios提交用户和密码，完成注册*/document.querySelector('.btn').addEventListener('click', () => {axios({url: 'http://hmajax.itheima.net/api/register',method: 'POST',data: {username: 'hejuzs_01',    // 注意，重新注册用户名要修改，同样用户名不能注册两次password: 'hejuzs_01'}})})</script>
</body>

结果：
在这里插入图片描述

综合案例：地区查询

参考视频

需求：
接口文档

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>案例_地区查询</title><!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"> --><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><style>:root {font-size: 15px;}body {padding-top: 15px;}</style>
</head><body><div class="container"><form id="editForm" class="row"><!-- 输入省份名字 --><div class="mb-3 col"><label class="form-label">省份名字</label><input type="text" value="北京" name="province" class="form-control province" placeholder="请输入省份名称" /></div><!-- 输入城市名字 --><div class="mb-3 col"><label class="form-label">城市名字</label><input type="text" value="北京市" name="city" class="form-control city" placeholder="请输入城市名称" /></div></form><button type="button" class="btn btn-primary sel-btn">查询</button><br><br><p>地区列表: </p><ul class="list-group"><!-- 示例地区 --><li class="list-group-item">东城区</li></ul></div><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*获取地区列表: http://hmajax.itheima.net/api/area查询参数:pname: 省份或直辖市名字cname: 城市名字*/// 目标: 根据省份和城市名字, 查询地区列表// 1. 查询按钮-点击事件document.querySelector('.sel-btn').addEventListener('click', () => {// 2. 获取省份和城市名字let p_name = document.querySelector('.province').valuelet c_name = document.querySelector('.city').value// 3. 基于axios请求地区列表数据axios({url: 'http://hmajax.itheima.net/api/area',params: {pname:p_name,cname:c_name}}).then(result => {// console.log(result)// 4. 把数据转li标签插入到页面上let list = result.data.listconsole.log(list)let theLi = list.map(areaName => `<li class="list-group-item">${areaName}</li>`).join('')console.log(theLi)document.querySelector('.list-group').innerHTML = theLi})})</script>
</body></html>

结果：
在这里插入图片描述

4 axios 错误处理

参考视频

语法:在 then 方法的后面，通过点语法调用 catch 方法，传入回调函数并定义形参
处理:注册案例，重发注册时通过弹框提示用户错误原因
需求：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>axios错误处理</title>
</head><body><button class="btn">注册用户</button><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>/*注册用户: http://hmajax.itheima.net/api/register请求方法: POST参数名:username: 用户名 (中英文和数字组成, 最少8位)password: 密码 (最少6位)目标: 点击按钮, 通过axios提交用户和密码, 完成注册需求: 使用axios错误处理语法, 拿到报错信息, 弹框反馈给用户*/document.querySelector('.btn').addEventListener('click', () => {axios({url: 'http://hmajax.itheima.net/api/register',method: 'post',data: {username: 'hejuzs_01',password: 'hejuzs_01'}}).then(result => {// 成功console.log(result)}).catch(error => {      // error里面可以捕获到错误信息，如果后端的java接口抛出异常信息，返回了了一个状态码不正常的响应信息，那么就会进入到catch里面捕获到// 失败// 处理错误信息console.log(error)console.log(error.response.data.message)alert(error.response.data.message)})})</script>
</body></html>

结果：
在这里插入图片描述

4 前端前置技术（上）：AJAX技术、Axios技术（前端发送请求）

文章目录前言一、Ajax技术（从服务端获取数据，发送各种请求）0 接口文档管理：使用apipost等接口测试软件创建接口便于前端后端分离测试1 基本概念2 原生Ajax使用示例（几年前的早期用法） 二、 Axios技术(对原…...

编程日记 2025/2/7 13:45:38

2022年全国职业院校技能大赛网络系统管理赛项模块A：网络构建（样题3）-网络部分解析-附详细代码

目录附录1：拓扑图附录2：地址规划表 1.SW1 2.SW2 3.SW3 4.SW4 5.SW5 6.SW6 7.SW7 8.R1 9.R2 10.R3 11.AC1 12.AC2 13.AP2 14.AP3 15.EG1 16.EG2 附录1：拓扑图附录2：地址规划表设备...

编程日记 2025/2/7 13:44:36

ASP.NET Core中间件的概念及基本使用

什么是中间件中间件是ASP.NET Core的核心组件，MVC框架、响应缓存、身份验证、CORS、Swagger等都是内置中间件。广义上来讲：Tomcat、WebLogic、Redis、IIS；狭义上来讲，ASP.NET Core中的中间件指ASP.NET Core中的一个组件。中间件…...

编程日记 2025/2/7 13:42:33

每日Attention学习22——Inverted Residual RWKV

模块出处 [arXiv 25] [link] [code] RWKV-UNet: Improving UNet with Long-Range Cooperation for Effective Medical Image Segmentation 模块名称 Inverted Residual RWKV (IR-RWKV) 模块作用用于vision的RWKV结构模块结构模块代码注：cpp扩展请参考作者原…...

编程日记 2025/2/7 13:40:31

使用jmeter进行压力测试

使用jmeter进行压力测试 jmeter安装官网安装包下载，选择二进制文件，解压。 tar -xzvf apache-jmeter-x.tgz依赖jdk安装。 yum install java-1.8.0-openjdk环境变量配置，修改/etc/profile文件，添加以下内容。 export JMETER/…...

编程日记 2025/2/7 13:39:30

LQB（0）-python-基础知识

一、Python开发环境与基础知识 python解释器：用于解释python代码方式： 1.直接安装python解释器 2.安装Anaconda管理python环境 python开发环境：用于编写python代码 1.vscode 2.pycharm # 3.安装Anaconda后可以使用网页版的jupyter n…...

编程日记 2025/2/7 13:38:27

每日Attention学习18——Grouped Attention Gate

模块出处 [ICLR 25 Submission] [link] UltraLightUNet: Rethinking U-shaped Network with Multi-kernel Lightweight Convolutions for Medical Image Segmentation 模块名称 Grouped Attention Gate (GAG) 模块作用轻量特征融合模块结构模块特点特征融合前使用Group…...

编程日记 2025/2/7 13:37:26

QT 窗口A覆盖窗口B时，窗口B接受不到鼠标事件

一、问题在项目的需求中，地图A上面需要叠放一个任务窗口B，B覆盖了A，导致A接受不到鼠标及滚轮事件。二、解决方案 1、Qt::WA_TransparentForMouseEvents 是 Qt 框架中的一个属性，用于使指定的控件及其子控件不响应鼠标事件。当启…...

编程日记 2025/2/7 13:35:23

Unity安装教学与相关问题

文章目录 1. 前言2.Unity Hub2.1 下载Unity Hub2.2 安装Unity Hub2.3 注册Unity账号2.4 在Hub上登录账号2.5 在Hub上获取许可证 3. 下载并安装Unity3.1 从Unity Hub下载（推荐）3.1.1 选择下载版本3.1.2 选择下载组件3.1.3 安装Visual Studio Community 20…...

编程日记 2025/2/7 13:31:18

[Python人工智能] 四十九.PyTorch入门 (4)利用基础模块构建神经网络并实现分类预测

从本专栏开始，作者正式研究Python深度学习、神经网络及人工智能相关知识。前文讲解PyTorch构建回归神经网络。这篇文章将介绍如何利用PyTorch构建神经网络实现分类预测，其是使用基础模块构建。前面我们的Python人工智能主要以TensorFlow和Keras为主，而现在最主流的深度学习框…...

编程日记 2025/2/7 13:29:14

实现一个 LRU 风格的缓存类

实现一个缓存类需求描述豆包解决思路：实现代码：优化11. std::list::remove 的时间复杂度问题2. 代码复用优化后的代码优化说明优化21. 边界条件检查2. 异常处理3. 代码封装性4. 线程安全优化后的代码示例优化说明 DeepSeek（深度思考R1&…...

编程日记 2025/2/7 13:28:13

【蓝桥杯嵌入式】4_key：单击+长按+双击

1、电路图将4个按键的引脚设置为input，并将初始状态设置为Pull-up（上拉输入） 为解决按键抖动的问题，我们使用定时器中断进行消抖打开TIM3时钟并设置参数，中断间隔10ms，当计数达到10000时溢出。80M/80/10…...

编程日记 2025/2/7 13:26:11

深入理解 C# 与.NET 框架

.NET学习资料 .NET学习资料 .NET学习资料一、引言在现代软件开发领域，C# 与.NET 框架是构建 Windows、Web、移动及云应用的强大工具。C# 作为一种面向对象的编程语言，而.NET 框架则是一个综合性的开发平台，它们紧密结合，为开…...

编程日记 2025/2/7 13:24:09

10. 神经网络（二.多层神经网络模型）

多层神经网络（Multi-Layer Neural Network），也称为深度神经网络（Deep Neural Network, DNN），是机器学习中一种重要的模型，能够通过多层次的非线性变换解决复杂的分类、回归和模式识别问题。以下…...

编程日记 2025/2/7 13:23:08

spark 性能调优（一）：执行计划

在 Spark 中，explain 函数用于提供数据框（DataFrame）或 SQL 查询的逻辑计划和物理执行计划的详细解释。它可以帮助开发者理解 Spark 是如何执行查询的，包括优化过程、转换步骤以及它将采用的物理执行策略。 1. 逻辑计划 (Logical…...

编程日记 2025/2/7 13:22:06

“卫星-无人机-地面”遥感数据快速使用及地物含量计算的实现方法

在与上千学员交流过程中，发现科研、生产和应用多源遥感数据时，能快速上手，发挥数据的时效性，尽快出创新性成果，是目前的学员最迫切的需求。特别是按照“遥感数据获取-处理-分析-计算-制图”全流程的答疑解惑&#xff0…...

编程日记 2025/2/7 13:19:02

杨氏数组中查找某一数值是否存在

判断数据是否存在于杨氏矩阵中 （小米真题） 题目：有一个数字矩阵，矩阵的每行从左到右是递增的，矩阵从上到下是递增的，请编写程序在这样的矩阵中查找某个数字是否存在。要求：时间复杂度小于O(N) …...

编程日记 2025/2/7 13:17:55

c语言对应汇编写法（以中微单片机举例）

芯片手册资料 1. 赋值语句 C语言： a 5; b a; 汇编： ; 立即数赋值 LDIA 05H ; ACC 5 LD R01,A ; R01 ACC（a5）; 寄存器间赋值 LD A,R01 ; ACC R01（读取a的值） LD R02,A ; R02 ACC&…...

编程日记 2025/2/7 13:12:49

详解CSS `clear` 属性及其各个选项

详解CSS clear 属性及其各个选项 1. clear: left;示例代码 2. clear: right;示例代码 3. clear: both;示例代码 4. clear: none;示例代码总结在CSS布局中，clear 属性是一个非常重要的工具，特别是在处理浮动元素时。本文将详细解释 clear 属性及其各个选…...

编程日记 2025/2/7 13:09:43

算法设计与分析三级项目--管道铺设系统

摘要该项目使用c算法逻辑，开发环境为VS2022，旨在通过Prim算法优化建筑物间的连接路径，以支持管线铺设规划。可以读取文本文件中的建筑物名称和距离的信息，并计算出建筑物之间的最短连接路径和总路径长度，同时以利用…...

编程日记 2025/2/7 13:08:42

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python｜GIF 解析与构建（5）：手搓截屏和帧率控制一、引言二、技术实现：手搓截屏模块 2.1 核心原理 2.2 代码解析：ScreenshotData类 2.2.1 截图函数：capture_screen 三、技术实现&…...

编程新知 2025/9/19 8:02:57

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型：架构设计与关键步骤在当今数字化转型的浪潮中，大语言模型（LLM）已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中，不仅可以优化用户体验，还能为业务决策提供…...

编程新知 2025/11/8 15:22:19

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中，可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行，可以在脚本开头添加 set e 命令来取消该设置。举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令，并忽略错误 rm somefile…...

编程新知 2025/9/11 15:27:32

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook，用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途，下面我将全面详细地介绍它的特性和用法。基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真题 ( 满分 1 0 0 分时间 1 2 0 分钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/10/18 21:05:27

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法：原理、应用与企业场景高危文件识别旨在检测可能导致安全威胁的文件，如包含恶意代码、敏感数据或欺诈内容的文档，在企业协同办公环境中（如Teams、Google Workspace）尤为重要。结合大模型技术&…...

编程新知 2025/11/7 18:51:31

Neo4j 集群管理：原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档，本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石，用于构建高可用、可扩展且一致的图数据库服务…...

编程新知 2025/7/4 0:49:28

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

编程新知 2025/11/8 7:31:24

HBuilderX安装（uni-app和小程序开发）

下载HBuilderX 访问官方网站：https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本： Windows版（推荐下载标准版） Windows系统安装步骤运行安装程序： 双击下载的.exe安装文件如果出现安全提示&…...

编程新知 2025/11/8 7:46:45

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

编程新知 2025/11/8 8:30:44

文章目录

前言

一、Ajax技术（从服务端获取数据，发送各种请求）

0 接口文档管理：使用apipost等接口测试软件创建接口便于前端后端分离测试

1 基本概念

2 原生Ajax使用示例（几年前的早期用法）

二、 Axios技术(对原生的Ajax进行了封装)

1 基本概念

（1）Axios是什么

（2）常见的请求方式有哪些？

2 快速入门

示例1：入门案例

示例2：入门案例+绑定事件

3 Axios通用请求格式语法

示例1：params传递参数发送get请求

示例2：data传递参数发送post请求

综合案例：地区查询

4 axios 错误处理

相关文章：