Vue+axios
1. axios简介
axios 是一个基于 Promise 的 HTTP 客户端，主要用于浏览器和 Node.js 环境中发送 HTTP 请求。它是目前前端开发中最流行的网络请求库之一，被广泛应用于各种 JavaScript 项目（如 React、Vue、Angular 等框架或原生 JS 项目）。
核心特点
- 支持浏览器和 Node.js⭐：在浏览器中使用 XMLHttpRequest 发送请求，在 Node.js 中使用 http 模块，实现了跨环境兼容。
- 基于 Promise⭐：支持 Promise API，可配合
async/await使用，让异步请求代码更简洁、易读。 - 拦截请求和响应⭐：可以在请求发送前或响应返回后进行拦截处理（如添加请求头、处理错误、加载状态管理等）。
- 自动转换 JSON 数据⭐：请求时会自动将数据转为 JSON 格式，响应时会自动解析 JSON 数据，无需手动处理。
- 取消请求：支持取消正在进行的 HTTP 请求，避免无效请求浪费资源。
- 超时处理：可以设置请求超时时间，超时后自动中断请求。
- 客户端防止 XSRF：提供了防御跨站请求伪造（XSRF）的机制。
2. axios请求地址
链接请求方式：功能强大的网络请求库
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>本地导入方式：例子：在同目录下的js文件里的本地axios文件
<script src="js/axios.min.js"></script>
3. axios的基本结构
var myurl = "需要请求的页面以及参数"
axios.get(myurl).then(function(res))
myurl指的是向后台请求的页面以及自定义访问的参数
res指后台响应请求后传递回的参数，数据格式一般为json，用Vue中的data来接收
举例：向后台servlet的class.do发送操作请求op=classList
var app=new Vue({el: "#app",data:{classesList:[]},methods:{searchClass:function () {var than = thisvar myurl="http://localhost:8080/class.do?op=classesList"axios.get(myurl).then(function (res) {than.classesList=res.data})}}
})如果myurl传递参数多，则使用axios.post(myurl)方法。
进阶：axios的标准格式为
axios.get(myurl,headers{})其中myurl为传递参数地址，header{}为请求头
如果传递参数过多，则使用post：
axios.post(myurl,body,headers)axios.post(myurl,{'key':'value','key2':'value',...},headers{'token':'value'})myurl为传递参数的地址，
body为传递的参数map，
headers为传递的请求头。
附录：
请求头 headers 简介
在 HTTP 协议中，请求头（Request Headers）是客户端（如浏览器）向服务器发送请求时携带的附加信息。它们以键值对的形式存在，用于描述请求的元数据（如浏览器类型、请求的资源类型、缓存策略等），帮助服务器理解如何处理请求。
理解请求头是开发和调试 HTTP 应用的基础，合理设置请求头可优化性能、增强安全性，并确保客户端与服务器正确交互。
1. 通用头（General Headers）
适用于请求和响应，但与具体数据无关：
Cache-Control：控制缓存策略（如no-cache,max-age=3600）。Connection：控制连接状态（如keep-alive,close）。Date：请求的日期和时间。Pragma：兼容性缓存指令（如no-cache）。Transfer-Encoding：数据传输编码方式（如chunked）。
2. 请求头（Request-Specific Headers）
描述请求的特定信息：
Accept：客户端可接受的响应内容类型（如application/json,text/html）。Accept-Charset：客户端可接受的字符集（如utf-8,iso-8859-1）。Accept-Encoding：客户端可接受的内容编码（如gzip,deflate,br）。Accept-Language：客户端可接受的自然语言（如zh-CN,en-US）。Authorization：身份验证信息（如Bearer token,Basic base64）。Cookie：客户端存储的 Cookie 信息。Host：请求的服务器域名和端口（如www.example.com:443）。Origin：发起跨域请求的源（如https://example.com）。Referer：前一个页面的 URL（拼写错误但被广泛接受）。User-Agent：客户端信息（如浏览器类型、操作系统，如Mozilla/5.0 (Windows NT 10.0)...）。
3. 实体头（Entity Headers）
描述请求体的元数据（若有请求体）：
Content-Length：请求体的长度（字节）。Content-Type：请求体的媒体类型（如application/json,multipart/form-data）。Content-Encoding：请求体的编码方式（如gzip）。Content-Language：请求体的自然语言（如zh-CN）。
Axios（HTTP 客户端）
axios.post('https://api.example.com/data', { key: 'value' }, {headers: {'Content-Type': 'application/json','Authorization': 'Bearer your_token'}
});