axios

概述

axios 是 Node.js 和浏览器环境下最流行的 HTTP 客户端库，提供 Promise API，支持请求/响应拦截器、自动 JSON 转换、请求取消、并发控制等功能。

核心特点：

• 浏览器端：自动使用 XMLHttpRequest
• Node.js 端：自动使用 http/https 模块
• 请求/响应拦截器
• 自动转换 JSON
• 请求取消（AbortController / CancelToken）
• 防御 CSRF/XSRF

安装：

npm install axios

核心函数

axios(config) — 通用请求

const axios = require('axios')

// GET 请求
const res = await axios.get('https://api.example.com/users', {
  params: { page: 1, limit: 10 },  // 自动拼接到 URL
  headers: { Authorization: 'Bearer xxx' },
  timeout: 5000
})

// POST 请求
const res = await axios.post('https://api.example.com/users', {
  name: '张三',
  email: 'z@example.com'
})

// 其他方法
axios.put(url, data, config)
axios.patch(url, data, config)
axios.delete(url, config)
axios.head(url, config)
axios.options(url, config)

请求配置

const res = await axios({
  method: 'GET',
  url: 'https://api.example.com/user',
  baseURL: 'https://api.example.com',  // 与 url 拼接
  params: { id: 1 },                   // 查询参数
  data: { name: '张三' },               // 请求体
  headers: { 'X-Custom': 'value' },
  timeout: 5000,                       // 超时（ms）
  withCredentials: false,              // 携带凭证
  responseType: 'json',                // 'json'|'text'|'arraybuffer'|'blob'|'document'
  responseEncoding: 'utf8',
  maxContentLength: 10 * 1024 * 1024, // 最大响应体
  maxBodyLength: 5 * 1024 * 1024,     // 最大请求体
  validateStatus: (status) => status >= 200 && status < 300,  // 什么状态码算成功
  transformRequest: [(data, headers) => JSON.stringify(data)],  // 请求前转换
  transformResponse: [(data) => JSON.parse(data)],            // 响应后转换
  paramsSerializer: (params) => Qs.stringify(params),          // 自定义参数序列化
})

响应结构

const res = await axios.get('/user')
// res.data       — 响应体（自动 JSON 解析）
// res.status     — HTTP 状态码（200）
// res.statusText — 状态文本（'OK'）
// res.headers    — 响应头（所有，键名小写化）
// res.config     — 请求配置（原始）
// res.request    — 底层请求对象

拦截器

// 请求拦截器
axios.interceptors.request.use(
  (config) => {
    config.headers.Authorization = `Bearer ${getToken()}`
    return config
  },
  (error) => Promise.reject(error)
)

// 响应拦截器
axios.interceptors.response.use(
  (res) => res.data,            // 直接返回 data，简化调用
  (error) => {
    if (error.response?.status === 401) {
      // Token 过期，跳转登录
      router.push('/login')
    }
    return Promise.reject(error)
  }
)

并发请求

// 同时发起多个请求
const [usersRes, postsRes] = await axios.all([
  axios.get('/users'),
  axios.get('/posts')
])

// 等价于 Promise.all
const [users, posts] = await Promise.all([
  axios.get('/users'),
  axios.get('/posts')
])

请求取消

// 方式1：AbortController（推荐，浏览器/Node 均支持）
const controller = new AbortController()

axios.get('/users', { signal: controller.signal })
  .then(res => console.log(res.data))

// 取消请求
controller.abort()

// 方式2：CancelToken（已废弃，不推荐）
const CancelToken = axios.CancelToken
const source = CancelToken.source()

axios.get('/users', { cancelToken: source.token })
source.cancel('手动取消')

创建实例

// 创建独立实例（可预设基础配置）
const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: { 'X-App': 'MyApp' }
})

// 请求拦截
api.interceptors.request.use(config => {
  config.headers.Authorization = `Bearer ${getToken()}`
  return config
})

// 响应拦截
api.interceptors.response.use(
  res => res.data,
  error => {
    if (error.response?.status === 401) { /* 跳转登录 */ }
    return Promise.reject(error)
  }
)

// 使用
const users = await api.get('/users')
const user = await api.post('/users', { name: '张三' })

常见问题