Ajax中的axios

Asynchronous JavaScript And XML：异步的JavaScript和XML。使用XML HttpRequest 对象与服务器进行通讯。AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。（这一句话很好的诠释了异步的概念）无需多言，开始正题Axios 是一个基于Promise的HTTP 客户端，适用于node.js和浏览器。它是同构的（即它可以使用同一套代

姬嘉晗-19期-河北工职大

1054人浏览 · 2024-12-22 17:10:45

姬嘉晗-19期-河北工职大 · 2024-12-22 17:10:45 发布

既然提到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时做的一个思维导图

语法

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 上可见，不适合传递敏感信息如密码等