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