Ajax中的axios
既然提到Ajax，那就先来说一说什么是Ajax吧
关于Ajax
Ajax的定义
Asynchronous JavaScript And XML：异步的JavaScript和XML。
反正就是一句话总结：
使用XML HttpRequest 对象与服务器进行通讯。
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。（这一句话很好的诠释了异步的概念）
无需多言，开始正题
关于axios
什么是axios
Axios 是一个基于Promise的HTTP 客户端，适用于node.js和浏览器。它是同构的（即它可以使用同一套代码运行在浏览器和 nodejs 中）。在服务器端它使用原生的 node.js http模块，在客户端（浏览器）它使用 XMLHttpRequests。
特性
当然，下面是从官网上找的东西
使用
导入
我最常用的方法是直接导入地址
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>请求方法
这是在学习过程中做的一些小总结，其实最常用的是get和post方法
其实这两个最大的区别就是在请求的数据，缓存和安全性的区别
这算是整体一点的，大总结，这四个方法的区别
| get | post | put | delete | |
| 描述 | 查看 | 创建 | 更新 | 删除 |
| 定义 | 从指定资源请求数据 | 向指定资源提交要处理的数据 | 更新指定资源的全部内容 | 删除指定资源 |
| 请求格式 | 参数在 URL 中 | 数据在请求体中 | 数据在请求体中 | 通过 URL 指定资源标识符 |
| 对服务器性能的影响 | 较小 | 较大 | 较大 | 较大 |
| 是否适用对同一个资源进行多次操作 | 可查询 | 否 | 否 | 否 |
| 应用场景 | 获取网页、查询数据 | 创建新资源 | 更新已存在资源（完整更新） | 删除已存在资源 |
| 优点 | 可以被缓存和浏览器保存。 对服务器性能的影响较小。 | 可以提交比 相对更安全，因为请求参数不会被包含在 URL 中。 | 可以更新指定的资源。 | 可以永久删除指定的资源。 |
这是最一开始学习Ajax时做的一个思维导图
语法
axios({
url:"目标资源地址/要访问的后端接口地址",
method:"请求方法", // 请求的方法，GET可以省略（不区分大小写）
data/params:{ // data是提交的数据
参数名1：值1,
参数名2：值2
}
// 使用回调函数
}).then((result)=>{
对服务器返回的数据进行处理
})前提要知道，
如何使用URL查找对应参数：
使用URL查询参数的作用：浏览器提供给服务器额外信息，获取对应的数据。
而相对应的使用axios查询：
就是使用params参数进行查询，携带参数名和值
例：
<!DOCTYPE html>
<html>
<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——get</title>
<style type="text/css">
#dv {
border: 1px solid pink;
}
</style>
</head>
<body>
<h1>axios_get</h1>
<form action="javascript:;" class="example-form">
<input type="text" name="name" id="name">
<br>
<input type="text" name="text1" id="text1">
<br>
<input type="button" class="btn" id="btn" value="提交">
</form>
<div id="dv"></div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
btn.onclick = function(){
var n = document.getElementById('name').value
var t = document.getElementById('text1').value
console.log(n);
console.log(t);
axios({
url: 'http://localhost:8080/getAjaxTest',
method: 'GET',
params: {
name: n,
text1: t
}
}).then(result => {
console.log(result);
console.log(result.data);
var p = document.createElement("p");
p.appendChild(document.createTextNode(result.data));
var ps = document.getElementById("dv").getElementsByTagName("p");
// +的优先级比？高,所以要加括号
new Function("p", "ps", 'document.getElementById("dv").' + (ps[0] ?
"insertBefore(p, ps[0])" : "appendChild(p)"))(p, ps);
}).catch(error => {
console.log(error);
});
}
</script>
</body>
</html>就会由于使用params的方式，会从网络中显示出来，（如果不清楚，可以看下面的查找错误）
主要可以看这里的思路和结构，其实这里也有一个知识点：
在 params的参数中，如果参数名和值一样，可以只写一个：
params: {
name, // 当参数名和值都为name
text1
}错误处理
在then方法的后面，通过点语法调用catch方法，传入回调函数并定义参数
axios({
// 请求选项
}).then(result=>{
// 处理数据
}).catch(error=>{
// 处理错误
})在哪用：
注册账号时，重复注册时通过弹窗提示用户错误原因
查找错误：
这就是我们需要了解的HTTP协议--请求报文和响应报文
请求报文：
响应报文：
例：
还拿上一个我的代码举例：
这是点击提交后的页面效果
接下来我们看提交结果的内部是什么样的
在这里可以明显看出来哪里是响应哪里是请求
算了还是用edge吧
请求报文在标头那里
所以可以依据这些查看是客户端还是服务端的错误
最后一些需要注意的点
既然最开始提到了params和data，那他们有什么区别呢
| 比较项目 | data 参数 | params 参数 |
| 传输方式 | 放在请求体中传输 | 通过 URL 进行传输，拼接在 URL 末尾 |
| 使用场景 | 适用于 POST、PUT、PATCH 等非 GET 请求，用于向服务器提交数据以创建、更新或修改资源 | 主要用于 GET 请求，让服务器根据参数筛选、排序或返回特定资源 |
| 数据大小限制 | 相对没有严格的类似 URL 长度那样的限制（实际受服务器配置等因素影响），更适合大量数据传输 | 受 URL 长度限制，过长 URL 可能导致请求失败 |
| 安全性 | 不在 URL 中显示数据，一定程度上保护隐私和安全性，适合传递敏感信息 | 数据在 URL 上可见，不适合传递敏感信息如密码等 |
就先说这些吧，其他的如果什么时候想起来了，可能会继续补充（虽然可能性不大）
如果文章中有什么错误，欢迎在评论区提出。
原文地址：https://blog.csdn.net/2401_84246493/article/details/144647175
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！