🌟 为什么选择Axios？

+ 支持浏览器和Node.js双环境
+ 自动JSON数据转换
+ 请求/响应拦截器体系
+ 内置CSRF/XSRF防御
+ 支持Promise API
- 相比Fetch API增加约12kb体积

⚡ 5分钟快速上手

1. 基础安装

npm install axios
# 或
yarn add axios

2. 发起第一个请求

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: 'securePassword123'
});

💡 核心功能解析

1. 创建实例与默认配置

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {'X-Custom-Header': 'foobar'}
});

// 全局默认配置
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

2. 拦截器工作流

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

// 响应拦截器
api.interceptors.response.use(
  response => response.data,
  error => {
    if (error.response.status === 401) {
      redirectToLogin();
    }
    return Promise.reject(error);
  }
);

3. 并发处理

const getUser = axios.get('/user/123');
const getPosts = axios.get('/posts');

axios.all([getUser, getPosts])
  .then(axios.spread((userRes, postsRes) => {
    console.log('用户数据:', userRes.data);
    console.log('文章列表:', postsRes.data);
  }));

🔥 高级应用场景

场景1：取消请求

const controller = new AbortController();

axios.get('/api/data', {
  signal: controller.signal
}).catch(error => {
  if (axios.isCancel(error)) {
    console.log('请求被取消:', error.message);
  }
});

// 取消请求
controller.abort('用户主动取消操作');

场景2：文件上传进度

axios.post('/api/upload', formData, {
  onUploadProgress: progressEvent => {
    const percent = Math.round(
      (progressEvent.loaded * 100) / progressEvent.total
    );
    console.log(`上传进度: ${percent}%`);
  }
});

场景3：自定义适配器

const adapter = axios.create({
  adapter: config => {
    /* 自定义请求逻辑 */
    return new Promise((resolve, reject) => {
      // 实现自定义网络库整合
    })
  }
});

🛠️ 企业级最佳实践

1. 安全配置方案

// 防止XSS攻击
axios.defaults.xsrfCookieName = 'CSRF-TOKEN';
axios.defaults.xsrfHeaderName = 'X-CSRF-TOKEN';

// 设置Content Security Policy
axios.defaults.headers.common['Content-Security-Policy'] = "default-src 'self'";

2. 性能优化策略

// 请求缓存实现
const cache = new Map();

async function cachedRequest(url) {
  if (cache.has(url)) {
    return cache.get(url);
  }
  const response = await axios.get(url);
  cache.set(url, response.data);
  return response.data;
}

3. 错误处理标准

function handleError(error) {
  if (error.response) {
    // 服务端返回非常规2xx响应
    console.error(`状态码: ${error.response.status}`);
    console.error(error.response.data);
  } else if (error.request) {
    // 请求已发出但无响应
    console.error('网络连接异常');
  } else {
    // 请求配置错误
    console.error('请求配置错误:', error.message);
  }
  return Promise.reject(error);
}

⚠️ 常见问题排雷指南

1. CORS跨域问题

// 后端需设置
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: *

// 前端配置
axios.post(url, data, {
  withCredentials: true
});

2. 请求参数序列化

const paramsSerializer = params => {
  return qs.stringify(params, { arrayFormat: 'brackets' });
};

axios.get('/api', { params: { ids: [1,2,3] }, paramsSerializer });

3. 多次拦截器执行

// 移除拦截器示例
const interceptor = axios.interceptors.request.use(...);
axios.interceptors.request.eject(interceptor);

+ 推荐配置：为不同业务模块创建独立axios实例
+ 性能提示：合理使用请求缓存与取消功能
- 注意：避免在拦截器中执行阻塞性操作

最后思考：Axios vs Fetch

选择建议：复杂项目首选Axios，轻量级场景可考虑Fetch API