axios
约 466 字大约 2 分钟
2024-09-04
NodeJS Browser
概述
Axios 是一个基于 Promise 的异步 HTTP 客户端库,专为浏览器和 Node.js 设计。
Axios 以简洁的 API 设计、健壮的错误处理和多环境支持,成为现代 Web 开发中异步通信的标杆。
特性
- 从浏览器创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 超时处理
- 查询参数序列化支持嵌套项处理
- 自动将请求体序列化为:
- JSON (
application/json
) - Multipart / FormData (
multipart/form-data
) - URL encoded form (
application/x-www-form-urlencoded
)
- JSON (
- 将 HTML Form 转换成 JSON 进行请求
- 自动转换 JSON 数据
- 获取浏览器和 node.js 的请求进度,并提供额外的信息(速度、剩余时间) 为 node.js 设置带宽限制
- 兼容符合规范的
FormData
和Blob
(包括 node.js) - 客户端支持防御
XSRF
安装
npm
npm install axios
pnpm
pnpm add axios
yarn
yarn add axios
从 CDN 加载:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
使用
基础示例
GET 请求
axios.get('/user', {
params: { id: 123 } // 参数自动转为 ?id=123
}).then(({ data }) => {
console.log(data)
})
POST 请求
axios.post('/login', {
username: 'admin',
password: 'securePassword' // 自动序列化为 JSON
})
拦截器
// 添加请求拦截器
axios.interceptors.request.use((config) => {
// 在发送请求之前做些什么
return config
}, (error) => {
// 对请求错误做些什么
return Promise.reject(error)
})
// 添加响应拦截器
axios.interceptors.response.use((response) => {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response
}, (error) => {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error)
})
取消请求
const controller = new AbortController()
axios.get('/foo/bar', {
signal: controller.signal
}).then((response) => {
// ...
})
// 取消请求
controller.abort()
使用场景
- 各种类型的前端应用均适用
- Node.js 服务端通信