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 = this
var 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'
}
});