Axios 全面入门：从基础到实战-EW帮帮网

在前端开发中，我们经常需要和后端交互，比如发送请求获取数据、提交表单、上传文件等。Axios 是一个非常流行的 HTTP 请求库，让这些事情变得简单高效。本文将带你全面认识 Axios，从基础概念到实用代码。

什么是 Axios？

Axios 是一个基于 Promise 的 HTTP 请求库，适用于浏览器和 Node.js。

简单说，Axios 让你在前端项目里很方便地向后端发起 HTTP 请求，比如：

获取列表数据（GET）
提交表单（POST）
更新资源（PUT / PATCH）
删除资源（DELETE）

它对比原生 fetch() 更简单，功能也更强大。

Axios 的核心特点

支持 Promise
请求和响应拦截器
自动转换 JSON 数据
支持超时设置、取消请求
浏览器端支持防止 CSRF
Node.js 中支持 http、https 请求

安装 Axios

npm install axios

在 Vue / React 项目里一般在 src/utils/request.js 里封装。

基础用法

import axios from 'axios';

// GET 请求
axios.get('/api/user')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

// POST 请求
axios.post('/api/login', {
  username: 'admin',
  password: '123456'
})
.then(response => {
  console.log(response.data);
});

携带 Token（常见于登录后请求）

axios.get('/api/user', {
  headers: {
    Authorization: 'Bearer your_token_here'
  }
});

请求拦截器和响应拦截器

在项目里，为了统一管理 token、报错、loading，一般会配置 Axios 拦截器。

const service = axios.create({
  baseURL: '/api',
  timeout: 10000
});

// 请求拦截器
service.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers['Authorization'] = 'Bearer ' + token;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

// 响应拦截器
service.interceptors.response.use(response => {
  return response.data;
}, error => {
  console.error('请求失败：', error);
  return Promise.reject(error);
});

结合前后端实战（以若依框架为例）

前端 Axios 请求：
- 请求拦截器：自动加 token、处理参数
- 响应拦截器：处理状态码（如 401 重登、500 报错）
后端 Spring Boot + Spring Security：
- 校验 token 确认用户身份
- 使用 @PreAuthorize 注解进行接口权限控制

这种前后端结合，确保了请求安全和操作权限。

设置超时时间

axios.get('/api', { timeout: 5000 });

取消请求

const controller = new AbortController();
axios.get('/api', { signal: controller.signal });
// 需要取消时：
controller.abort();

文件上传（带进度）

axios.post('/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' },
  onUploadProgress: progressEvent => {
    console.log('上传进度：', Math.round(progressEvent.loaded / progressEvent.total * 100));
  }
});

总结

Axios 是前端开发中必不可少的利器，简单易用、功能全面。它不仅是发送 HTTP 请求的工具，更是连接前后端、统一管理请求逻辑的重要桥梁。掌握 Axios，可以让你的项目更加高效、代码更优雅。

Axios 全面入门：从基础到实战