Axios介绍（前端开发处理网络请求首选工具，基于Promise HTTP客户端，可以在浏览器和Node.js环境使用）（Axios库）

Dontla2025-03-16 20:57

文章目录

    • [1. Axios简介](#1. Axios简介)
      • [1.1 核心特性](#1.1 核心特性)
        • [- **Promise based** - 支持Promise API，便于处理异步操作](#- Promise based - 支持Promise API，便于处理异步操作)
        • [- **跨平台** - 同时支持浏览器和Node.js环境](#- 跨平台 - 同时支持浏览器和Node.js环境)
        • [- **拦截请求和响应** - 通过拦截器机制轻松实现请求/响应转换](#- 拦截请求和响应 - 通过拦截器机制轻松实现请求/响应转换)
          • [1. **自动转换JSON数据** - 自动将请求数据转换为JSON格式](#1. 自动转换JSON数据 - 自动将请求数据转换为JSON格式)
          • [2. **取消请求** - 支持取消已发出但尚未完成的请求](#2. 取消请求 - 支持取消已发出但尚未完成的请求)
          • [3. **防御XSRF** - 自带防御跨站请求伪造攻击机制](#3. 防御XSRF - 自带防御跨站请求伪造攻击机制)
    • [2. 基础使用](#2. 基础使用)
      • [2.1 安装](#2.1 安装)
      • [2.2 发送GET请求](#2.2 发送GET请求)
      • [2.3 发送POST请求](#2.3 发送POST请求)
    • [3. 请求配置](#3. 请求配置)
    • [4. 响应结构](#4. 响应结构)
    • [5. 拦截器](#5. 拦截器)
      • [5.1 请求拦截器](#5.1 请求拦截器)
      • [5.2 响应拦截器](#5.2 响应拦截器)
    • [6. 错误处理](#6. 错误处理)
    • [7. 高级使用技巧](#7. 高级使用技巧)
      • [7.1 创建实例](#7.1 创建实例)
      • [7.2 请求取消](#7.2 请求取消)
      • [7.3 并发请求](#7.3 并发请求)
    • [8. 最佳实践](#8. 最佳实践)
      • [8.1 API模块化](#8.1 API模块化)
      • [8.2 响应数据统一处理](#8.2 响应数据统一处理)
    • [9. 性能优化技巧](#9. 性能优化技巧)
      • [9.1 数据缓存](#9.1 数据缓存)
      • [9.2 防抖和节流](#9.2 防抖和节流)
    • [10. 与其他HTTP客户端对比](#10. 与其他HTTP客户端对比)
    • 总结

1. Axios简介

Axios是一个基于Promise的HTTP客户端，可以在浏览器和Node.js环境中使用。它提供了一套简单且一致的API，使得发送HTTP请求变得异常便捷。自发布以来，Axios已成为前端开发中处理网络请求的首选工具之一。

1.1 核心特性

- Promise based - 支持Promise API，便于处理异步操作
- 跨平台 - 同时支持浏览器和Node.js环境
- 拦截请求和响应 - 通过拦截器机制轻松实现请求/响应转换
1. 自动转换JSON数据 - 自动将请求数据转换为JSON格式
2. 取消请求 - 支持取消已发出但尚未完成的请求
3. 防御XSRF - 自带防御跨站请求伪造攻击机制

2. 基础使用

2.1 安装

bash 复制代码 
# 使用npm
npm install axios

# 使用yarn
yarn add axios

# 使用CDN
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2.2 发送GET请求

javascript 复制代码 
// 基本GET请求
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('请求出错', error);
  });

// 带参数的GET请求
axios.get('https://api.example.com/data', {
  params: {
    id: 123,
    category: 'frontend'
  }
})
  .then(response => {
    console.log(response.data);
  });

2.3 发送POST请求

javascript 复制代码 
// 基本POST请求
axios.post('https://api.example.com/users', {
  username: 'admin',
  password: '12345'
})
  .then(response => {
    console.log(response.data);
  });

// 使用FormData
const formData = new FormData();
formData.append('file', fileInput.files[0]);

axios.post('https://api.example.com/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
});

3. 请求配置

Axios提供了丰富的配置选项，可以精确控制请求行为：

javascript 复制代码 
const config = {
  // 请求URL
  url: 'https://api.example.com/data',
  
  // 请求方法
  method: 'post', // 默认是get
  
  // 基础URL，将与url拼接
  baseURL: 'https://api.example.com/',
  
  // 自定义请求头
  headers: {
    'Authorization': 'Bearer token123',
    'Content-Type': 'application/json'
  },
  
  // URL参数
  params: {
    id: 1,
    page: 2
  },
  
  // 请求体数据
  data: {
    username: 'admin'
  },
  
  // 请求超时时间（毫秒）
  timeout: 5000,
  
  // 是否携带凭证信息（cookies）
  withCredentials: false
};

axios(config);

4. 响应结构

Axios响应对象包含以下信息：

javascript 复制代码 
axios.get('/api/data')
  .then(response => {
    console.log(response.data);        // 服务器返回的数据
    console.log(response.status);      // HTTP状态码
    console.log(response.statusText);  // HTTP状态信息
    console.log(response.headers);     // 响应头信息
    console.log(response.config);      // 请求配置信息
  });

5. 拦截器

拦截器是Axios的强大特性，可以在请求发送前和响应接收后进行预处理。

5.1 请求拦截器

javascript 复制代码 
// 添加请求拦截器
axios.interceptors.request.use(
  config => {
    // 在发送请求前做些什么
    // 例如：添加认证令牌
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

5.2 响应拦截器

javascript 复制代码 
// 添加响应拦截器
axios.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    // 例如：统一数据格式处理
    if (response.data.code === 0) {
      return response.data.data;
    }
    return response;
  },
  error => {
    // 对响应错误做点什么
    if (error.response && error.response.status === 401) {
      // 处理未授权的情况
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

6. 错误处理

Axios提供了多种错误处理机制：

javascript 复制代码 
axios.get('/api/data')
  .then(response => {
    // 处理成功响应
  })
  .catch(error => {
    if (error.response) {
      // 服务器返回了状态码，但不在2xx范围内
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
      
      switch (error.response.status) {
        case 400: console.log('请求参数错误'); break;
        case 401: console.log('未授权访问'); break;
        case 404: console.log('请求资源不存在'); break;
        case 500: console.log('服务器内部错误'); break;
        default: console.log(`其他错误: ${error.response.status}`);
      }
    } else if (error.request) {
      // 请求已发出，但没有收到响应
      console.log('网络异常，服务器未响应');
    } else {
      // 请求配置有误
      console.log('请求配置错误:', error.message);
    }
    
    console.log(error.config); // 请求配置
  });

7. 高级使用技巧

7.1 创建实例

创建具有自定义配置的Axios实例：

javascript 复制代码 
// 创建API实例
const apiClient = axios.create({
  baseURL: 'https://api.example.com/v1',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  }
});

// 使用实例发送请求
apiClient.get('/users').then(response => {
  console.log(response.data);
});

7.2 请求取消

使用CancelToken取消请求：

javascript 复制代码 
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/api/user/123', {
  cancelToken: source.token
}).catch(error => {
  if (axios.isCancel(error)) {
    console.log('请求已取消:', error.message);
  } else {
    // 处理错误
  }
});

// 取消请求
source.cancel('用户取消了操作');

7.3 并发请求

同时发送多个请求并等待所有请求完成：

javascript 复制代码 
function getUserAccount() {
  return axios.get('/user/account');
}

function getUserPermissions() {
  return axios.get('/user/permissions');
}

// 使用Promise.all处理并发请求
Promise.all([getUserAccount(), getUserPermissions()])
  .then(([account, permissions]) => {
    console.log('账户:', account.data);
    console.log('权限:', permissions.data);
  })
  .catch(error => {
    console.error('请求出错:', error);
  });

// 使用axios.all和axios.spread
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread((account, permissions) => {
    console.log('账户:', account.data);
    console.log('权限:', permissions.data);
  }));

8. 最佳实践

8.1 API模块化

javascript 复制代码 
// api/index.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: process.env.API_BASE_URL || 'https://api.example.com',
  timeout: 5000
});

// 添加通用拦截器
apiClient.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

export default apiClient;

// api/user.js
import apiClient from './index';

export const userApi = {
  getProfile: () => apiClient.get('/user/profile'),
  updateProfile: (data) => apiClient.put('/user/profile', data),
  login: (credentials) => apiClient.post('/auth/login', credentials)
};

// 使用方式
import { userApi } from './api/user';

async function loadUserProfile() {
  try {
    const profile = await userApi.getProfile();
    // 处理用户信息
  } catch (error) {
    // 处理错误
  }
}

8.2 响应数据统一处理

javascript 复制代码 
// 定义统一响应结构
axios.interceptors.response.use(
  response => {
    // 假设API返回格式: { code: 0, message: 'success', data: {...} }
    const res = response.data;
    
    if (res.code !== 0) {
      // 处理业务错误
      Message.error(res.message || '操作失败');
      
      // 特定错误码处理
      if (res.code === 401) {
        // 清除登录状态并跳转
        store.dispatch('user/logout');
        router.push('/login');
      }
      
      return Promise.reject(new Error(res.message || '未知错误'));
    }
    
    return res.data;
  },
  error => {
    // 网络错误等处理
    Message.error('网络异常，请稍后重试');
    return Promise.reject(error);
  }
);

9. 性能优化技巧

9.1 数据缓存

javascript 复制代码 
// 简单的请求缓存实现
const cache = new Map();

function getCachedData(url, params = {}) {
  const key = `${url}_${JSON.stringify(params)}`;
  
  if (cache.has(key)) {
    const cachedData = cache.get(key);
    // 检查缓存是否过期
    if (Date.now() - cachedData.timestamp < 60000) { // 1分钟缓存
      return Promise.resolve(cachedData.data);
    }
  }
  
  return axios.get(url, { params })
    .then(response => {
      cache.set(key, {
        data: response.data,
        timestamp: Date.now()
      });
      return response.data;
    });
}

9.2 防抖和节流

javascript 复制代码 
// axios防抖示例
import axios from 'axios';
import { debounce } from 'lodash';

// 防抖搜索请求
const searchAPI = debounce((keyword, callback) => {
  axios.get('/api/search', { params: { q: keyword } })
    .then(response => callback(response.data))
    .catch(error => console.error('搜索失败', error));
}, 500); // 500ms内只发送一次请求

// 使用
searchInput.addEventListener('input', function() {
  searchAPI(this.value, results => {
    // 更新搜索结果
    updateSearchResults(results);
  });
});

10. 与其他HTTP客户端对比

特性 Axios Fetch jQuery Ajax
浏览器支持 现代浏览器 + polyfill 现代浏览器 + polyfill 全部
Promise API ✅ ✅ 有限支持
请求取消 ✅ 需AbortController ❌
拦截器 ✅ ❌ ❌
自动JSON转换 ✅ 需手动转换 ✅
超时设置 ✅ ❌ ✅
下载进度 ✅ ❌ ✅
CSRF保护 ✅ ❌ ✅

总结

Axios作为一个功能丰富、使用简便的HTTP客户端库，凭借其优秀的API设计和强大的功能扩展性，成为现代前端开发中处理网络请求的首选工具。通过合理利用配置选项、拦截器、错误处理等机制，可以构建出高效、健壮的前端应用。在前端技术栈快速迭代的今天，掌握Axios的各种高级特性和最佳实践，对提升开发效率和应用质量具有重要意义。

相关推荐
东阳马生架构27 分钟前
Netty基础—4.NIO的使用简介一
java·网络·netty
eli9601 小时前
node-ddk,electron 开发组件
前端·javascript·electron·node.js·js
会员果汁2 小时前
网络实验操作-VLAN
网络
东阳马生架构2 小时前
Netty基础—3.基础网络协议二
网络·网络协议
还是鼠鼠2 小时前
Node.js 的模块作用域和 module 对象详细介绍
前端·javascript·vscode·node.js·web
dmy4 小时前
go最便捷的http请求包resty
后端·http
狼头长啸李树身5 小时前
机器人交社保属于“无稽之谈”？
网络·机器人·媒体
Bruce Jue6 小时前
计算机网络开发--阻塞与非阻塞、同步与异步、http协议
网络协议·计算机网络·http
yczykjyxgs7 小时前
边缘计算与 PCDN 的融合：未来网络架构新趋势
网络·人工智能·边缘计算
热门推荐
01如何在WPS和Word/Excel中直接使用DeepSeek功能02DeepSeek各版本说明与优缺点分析03本地部署DeepSeek教程（Mac版本）04从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑05DeepSeek RAGFlow构建本地知识库系统06本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程07DeepSeek本地部署详细指南08如何本地部署AI智能体平台，带你手搓一个AI Agent09DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具10【文献阅读】DeepRAG：大语言模型的检索增强推理新范式