鹏展博

外观

axios

约 466 字

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)
  • 将 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 服务端通信