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 指定资源标识符 |
| 对服务器性能的影响 | 较小 | 较大 | 较大 | 较大 |
| 是否适用对同一个资源进行多次操作 | 可查询 | 否 | 否 | 否 |
| 应用场景 | 获取网页、查询数据 | 创建新资源 | 更新已存在资源（完整更新） | 删除已存在资源 |
| 优点 | 可以被缓存和浏览器保存。对服务器性能的影响较小。 | 可以提交比 GET 更大的数据量。相对更安全，因为请求参数不会被包含在 URL 中。 | 可以更新指定的资源。 | 可以永久删除指定的资源。 |

这是最一开始学习Ajax时做的一个思维导图

语法

javascript 复制代码

axios({
    url:"目标资源地址/要访问的后端接口地址",
    method:"请求方法",    // 请求的方法，GET可以省略（不区分大小写）
    data/params:{    // data是提交的数据
        参数名1：值1,
        参数名2：值2
    }
    // 使用回调函数
}).then((result)=>{
    对服务器返回的数据进行处理
})

前提要知道，

如何使用URL查找对应参数：

**使用URL查询参数的作用：**浏览器提供给服务器额外信息，获取对应的数据。

而相对应的使用axios查询：

就是使用params参数进行查询，携带参数名和值

例：

javascript 复制代码

<!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的参数中，如果参数名和值一样，可以只写一个：

javascript 复制代码

params: {
    name,    // 当参数名和值都为name
    text1
}

错误处理

在then方法的后面，通过点语法调用catch方法，传入回调函数并定义参数

javascript 复制代码

axios({
    // 请求选项
}).then(result=>{
    // 处理数据
}).catch(error=>{
    // 处理错误
})

在哪用：

注册账号时，重复注册时通过弹窗提示用户错误原因

查找错误：

这就是我们需要了解的HTTP协议--请求报文和响应报文

请求报文：

响应报文：

例：

还拿上一个我的代码举例：

这是点击提交后的页面效果

接下来我们看提交结果的内部是什么样的

在这里可以明显看出来哪里是响应哪里是请求

算了还是用edge吧

请求报文在标头那里

所以可以依据这些查看是客户端还是服务端的错误

最后一些需要注意的点

既然最开始提到了params和data，那他们有什么区别呢

|----------|-------------------------------------------------------|-------------------------------------|
| 比较项目 | data 参数 | params 参数 |
| 传输方式 | 放在请求体中传输 | 通过 URL 进行传输，拼接在 URL 末尾 |
| 使用场景 | 适用于POST、PUT、PATCH 等非 GET 请求，用于向服务器提交数据以创建、更新或修改资源 | 主要用于 GET请求，让服务器根据参数筛选、排序或返回特定资源 |
| 数据大小限制 | 相对没有严格的类似 URL 长度那样的限制（实际受服务器配置等因素影响），更适合大量数据传输 | 受 URL 长度限制，过长 URL 可能导致请求失败 |
| 安全性 | 不在 URL 中显示数据，一定程度上保护隐私和安全性，适合传递敏感信息 | 数据在 URL 上可见，不适合传递敏感信息如密码等 |

就先说这些吧，其他的如果什么时候想起来了，可能会继续补充（虽然可能性不大）

如果文章中有什么错误，欢迎在评论区提出。