网络框架 Axios 概述

引言

Axios 是一个基于 Promise 的 HTTP 客户端，同时适用于浏览器和 Node.js 环境。作为一款主流的 JavaScript 库，Axios 极大简化了前端与服务端之间的 HTTP 通信流程，兼容绝大多数现代浏览器，并提供拦截器、自动 JSON 转换、请求取消、自定义请求头等一系列实用能力。在配合 Vue、React 等现代前端框架使用时，能提供高效灵活的数据交互方案，是前端工程中最常用的网络请求工具之一。

https://axios-http.com/zh/

传统同步请求的问题

早期浏览器在向服务端请求数据时，普遍采用同步请求模式。服务端会返回完整的页面结构，浏览器收到后会强制刷新整个页面，用户体验较差。尤其在仅需局部数据更新的场景下，服务端仍返回整页数据，不仅造成网络资源浪费，还会显著增加带宽与服务端压力。

异步请求解决方案 Ajax

为提升数据请求效率与用户体验，异步网络请求技术 Ajax 逐步成为主流方案。 Ajax 支持在页面不刷新的前提下异步请求数据，仅更新页面需要修改的局部区域，避免整页刷新带来的卡顿与资源浪费，成为现代前端数据交互的基础机制。

Axios 实现原理

Axios 名称可理解为 ajax i/o system，它并非全新技术，本质是对原生 XHR（XMLHttpRequest）的封装。与原生 XHR 不同的是，Axios 基于 Promise 实现，完全符合 ES 异步编程规范，支持 then、catch、async/await 等现代化写法，代码可读性与可维护性远高于传统回调写法。

Axios 主要特性

浏览器端基于 XMLHttpRequest 对象发送 HTTP 请求
Node.js 端基于内置 http 模块实现网络请求
所有请求方法均返回 Promise 对象，支持链式调用与异步函数写法
支持请求拦截器，可在请求发送前统一做配置处理，如添加 Token、设置请求头
支持响应拦截器，可在响应返回后统一处理，如格式化数据、统一捕获错误
支持自定义请求 / 响应数据转换器，可实现数据加密、解密、格式统一处理
支持请求取消功能，可通过 CancelToken 或 AbortController 终止正在进行的请求
发送 JSON 数据时自动序列化，接收 JSON 数据时自动解析为 JS 对象
内置 XSRF 防御能力，可通过配置自动携带 XSRF 令牌，提升请求安全性

跨站请求伪造与防护

XSRF 全称为 Cross-Site Request Forgery，即跨站请求伪造，是一种常见的网络攻击方式。攻击者会伪装成合法用户，向目标站点发送恶意请求，利用用户已登录的身份执行非法操作，如转账、修改信息、删除数据等。

防范 XSRF 攻击的常用方案是在请求中携带由服务端生成的随机令牌，服务端校验令牌有效性后才处理请求。Axios 内置了对该机制的支持，可自动从 Cookie 中读取令牌并添加到请求头，大幅降低攻击风险。

Axios 基础使用

安装

# npm 安装
npm install axios

# yarn 安装
yarn add axios

基础 GET 请求

import axios from 'axios'

axios.get('/api/user', {
  params: { id: 1 }
})
.then(res => console.log(res.data))
.catch(err => console.error(err))

基础 POST 请求

axios.post('/api/user', {
  username: 'test',
  age: 20
})
.then(res => console.log(res.data))

异步函数写法

async function getUser() {
  try {
    const res = await axios.get('/api/user', { params: { id: 1 } })
    console.log(res.data)
  } catch (err) {
    console.error(err)
  }
}

Axios 与 TS 类型支持

Axios 自身提供完善的 .d.ts 类型声明文件，在 TS 项目中可直接使用，无需额外安装类型包。我们可以通过泛型精确约束响应数据类型，实现完整的类型校验与代码提示：

interface User {
  id: number
  name: string
  age: number
}

async function getUserInfo() {
  // 泛型指定返回数据类型
  const res = await axios.get<User>('/api/user', { params: { id: 1 } })
  // res.data 会自动推导为 User 类型
  console.log(res.data.name)
}