Axios之核心语法详解

AA-代码批发V哥2025-07-12 23:17

Axios之核心语法详解

    • 一、Axios的优势与基本概念
      • [1.1 为什么选择Axios？](#1.1 为什么选择Axios？)
      • [1.2 安装与引入](#1.2 安装与引入)
        • [1.2.1 直接引入（HTML页面）](#1.2.1 直接引入（HTML页面）)
        • [1.2.2 npm安装（模块化项目）](#1.2.2 npm安装（模块化项目）)
    • 二、Axios的基础请求方法
      • [2.1 基本语法：`axios(config)`](#2.1 基本语法：axios(config))
      • [2.2 快捷方法：简化常用请求](#2.2 快捷方法：简化常用请求)
        • [2.2.1 GET请求：获取数据](#2.2.1 GET请求：获取数据)
        • [2.2.2 POST请求：提交数据](#2.2.2 POST请求：提交数据)
    • 三、Axios的配置选项
      • [3.1 常用配置项](#3.1 常用配置项)
      • [3.2 配置方式](#3.2 配置方式)
        • [3.2.1 全局默认配置](#3.2.1 全局默认配置)
        • [3.2.2 创建实例配置](#3.2.2 创建实例配置)
    • 四、响应对象与错误处理
      • [4.1 响应对象结构](#4.1 响应对象结构)
      • [4.2 错误处理](#4.2 错误处理)
        • [4.2.1 网络错误（无响应）](#4.2.1 网络错误（无响应）)
        • [4.2.2 HTTP错误（有响应但状态码异常）](#4.2.2 HTTP错误（有响应但状态码异常）)
        • [4.2.3 完整错误处理示例](#4.2.3 完整错误处理示例)
    • 五、拦截器：请求与响应的统一处理
      • [5.1 请求拦截器](#5.1 请求拦截器)
      • [5.2 响应拦截器](#5.2 响应拦截器)
      • [5.3 移除拦截器](#5.3 移除拦截器)
    • 六、高级特性：请求取消与并发请求
      • [6.1 请求取消](#6.1 请求取消)
        • [6.1.1 使用`AbortController`（推荐，ES6+）](#6.1.1 使用AbortController（推荐，ES6+）)
        • [6.1.2 旧版方式（使用`CancelToken`，已废弃但仍可用）](#6.1.2 旧版方式（使用CancelToken，已废弃但仍可用）)
      • [6.2 并发请求处理](#6.2 并发请求处理)

Axios是目前最流行的HTTP客户端库之一，基于Promise封装了XMLHttpRequest，同时支持浏览器和Node.js环境。它不仅简化了Ajax请求的写法，还提供了拦截器、请求取消、自动转换JSON等强大功能。

一、Axios的优势与基本概念

1.1 为什么选择Axios？

相比原生XMLHttpRequest和fetch，Axios的核心优势在于：

  • 基于Promise：支持链式调用和async/await，避免回调地狱；
  • 自动转换数据：请求自动序列化JSON，响应自动解析JSON；
  • 拦截器机制：可在请求发送前和响应返回后统一处理（如添加token、处理错误）；
  • 请求取消：支持取消正在进行的请求（如切换页面时取消未完成的请求）；
  • 错误处理：统一捕获网络错误和HTTP错误状态码；
  • 浏览器兼容性：支持IE8+（需配合polyfill）和现代浏览器。

1.2 安装与引入

Axios的安装方式多样，适用于不同项目环境：

1.2.1 直接引入（HTML页面）

通过CDN或本地文件引入，暴露全局axios对象：

html 复制代码 
<!-- 引入CDN -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<!-- 本地引入 -->
<script src="./axios.min.js"></script>

<script>
  // 全局使用
  axios.get('/api/data').then(response => {
    console.log(response.data);
  });
</script>
1.2.2 npm安装（模块化项目）

适用于Vue、React等工程化项目：

bash 复制代码 
# 安装
npm install axios --save
# 或
yarn add axios

引入使用：

javascript 复制代码 
// ES6模块引入
import axios from 'axios';

// CommonJS引入
const axios = require('axios');

二、Axios的基础请求方法

Axios提供了多种请求方法，对应HTTP的各种请求类型，最常用的是get（获取数据）和post（提交数据）。

2.1 基本语法：axios(config)

Axios的核心是axios()函数，接收一个配置对象，返回Promise：

javascript 复制代码 
axios({
  method: 'get', // 请求方法（get/post/put/delete等）
  url: '/api/user', // 请求URL
  params: { id: 1 }, // GET请求参数（自动拼接到URL）
  // data: { name: '张三' }, // POST请求参数（放在请求体）
  timeout: 5000 // 超时时间（毫秒）
})
.then(response => {
  console.log('请求成功：', response.data);
})
.catch(error => {
  console.error('请求失败：', error);
});

2.2 快捷方法：简化常用请求

为简化代码，Axios提供了对应HTTP方法的快捷函数：

快捷方法 说明 语法示例
axios.get() 发送GET请求 axios.get(url, { params, ...config })
axios.post() 发送POST请求 axios.post(url, data, { ...config })
axios.put() 发送PUT请求（更新资源） axios.put(url, data, config)
axios.delete() 发送DELETE请求（删除资源） axios.delete(url, { params, config })
2.2.1 GET请求：获取数据

GET请求用于从服务器获取数据，参数通过params配置（自动拼接到URL的查询字符串）：

javascript 复制代码 
// 基础用法
axios.get('/api/user', {
  params: {
    id: 123,
    name: '张三' // 参数会拼接到URL：/api/user?id=123&name=张三
  },
  timeout: 3000 // 超时时间3秒
})
.then(response => {
  console.log('用户数据：', response.data); // 响应数据在response.data中
})
.catch(error => {
  console.error('获取失败：', error);
});

// 使用async/await（更简洁）
async function getUser() {
  try {
    const response = await axios.get('/api/user', { params: { id: 123 } });
    console.log('用户数据：', response.data);
  } catch (error) {
    console.error('获取失败：', error);
  }
}
getUser();
2.2.2 POST请求：提交数据

POST请求用于向服务器提交数据（如表单、新增资源），数据通过第二个参数传递（放在请求体）：

javascript 复制代码 
// 提交JSON数据（默认Content-Type: application/json）
async function addUser() {
  try {
    const user = { name: '李四', age: 25 };
    // 第二个参数为请求体数据
    const response = await axios.post('/api/user', user, {
      timeout: 5000
    });
    console.log('新增用户成功：', response.data);
  } catch (error) {
    console.error('新增失败：', error);
  }
}

// 提交表单数据（Content-Type: application/x-www-form-urlencoded）
async function submitForm() {
  try {
    const formData = new URLSearchParams();
    formData.append('username', 'admin');
    formData.append('password', '123456');
    
    const response = await axios.post('/api/login', formData, {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded' // 指定表单格式
      }
    });
    console.log('登录成功：', response.data);
  } catch (error) {
    console.error('登录失败：', error);
  }
}

三、Axios的配置选项

Axios的配置项非常灵活，可在全局、实例或请求级别设置，优先级为：请求配置 > 实例配置 > 全局默认配置。

3.1 常用配置项

配置项 说明 示例值
url 请求URL（必填） /api/user
method 请求方法（默认get） 'post', 'put'
baseURL 基础URL，自动拼接在url前 'https://api.example.com'
params GET请求参数（会拼接到URL） { id: 1, name: '张三' }
data POST/PUT请求体数据 { name: '张三' }
headers 请求头 { 'Authorization': 'Bearer token' }
timeout 超时时间（毫秒，默认0表示无超时） 5000
responseType 响应数据类型（默认json） 'text', 'blob'（用于下载文件）
withCredentials 是否允许跨域请求携带cookie true

3.2 配置方式

3.2.1 全局默认配置

设置全局默认配置，所有请求都会继承这些配置：

javascript 复制代码 
// 设置全局基础URL
axios.defaults.baseURL = 'https://api.example.com';
// 全局超时时间
axios.defaults.timeout = 5000;
// 全局请求头
axios.defaults.headers.common['Authorization'] = 'Bearer token';
axios.defaults.headers.post['Content-Type'] = 'application/json';

// 后续请求会自动使用全局配置
axios.get('/user') // 实际URL：https://api.example.com/user
  .then(response => { ... });
3.2.2 创建实例配置

当项目需要访问多个API域名时，可创建多个Axios实例，每个实例有独立配置：

javascript 复制代码 
// 创建实例1（访问API1）
const api1 = axios.create({
  baseURL: 'https://api1.example.com',
  timeout: 3000,
  headers: { 'X-From': 'api1' }
});

// 创建实例2（访问API2）
const api2 = axios.create({
  baseURL: 'https://api2.example.com',
  timeout: 5000
});

// 使用实例发送请求
api1.get('/user') // URL：https://api1.example.com/user
  .then(response => { ... });

api2.post('/data', { key: 'value' }) // URL：https://api2.example.com/data
  .then(response => { ... });

四、响应对象与错误处理

4.1 响应对象结构

Axios的响应对象包含服务器返回的数据及请求相关信息，主要属性：

javascript 复制代码 
axios.get('/api/user').then(response => {
  response.data; // 服务器返回的响应数据（最重要）
  response.status; // HTTP状态码（如200）
  response.statusText; // HTTP状态文本（如"OK"）
  response.headers; // 响应头
  response.config; // 请求时的配置对象
  response.request; // 原生请求对象（浏览器中是XMLHttpRequest）
});

4.2 错误处理

Axios的错误分为两种类型，需在catch中区分处理：

4.2.1 网络错误（无响应）

如断网、跨域限制等，此时error.response为undefined：

javascript 复制代码 
axios.get('/api/user')
  .catch(error => {
    if (!error.response) {
      // 网络错误
      console.error('网络错误：', error.message);
    }
  });
4.2.2 HTTP错误（有响应但状态码异常）

如404（资源不存在）、500（服务器错误）等，error.response包含响应信息：

javascript 复制代码 
axios.get('/api/user')
  .catch(error => {
    if (error.response) {
      // HTTP错误
      console.error('状态码：', error.response.status); // 如404
      console.error('错误数据：', error.response.data); // 服务器返回的错误信息
    }
  });
4.2.3 完整错误处理示例
javascript 复制代码 
async function fetchData() {
  try {
    const response = await axios.get('/api/data');
    console.log('成功：', response.data);
  } catch (error) {
    if (!error.response) {
      // 网络错误
      alert('网络异常，请检查连接');
    } else if (error.response.status === 404) {
      // 404错误
      alert('请求的资源不存在');
    } else if (error.response.status === 500) {
      // 500错误
      alert('服务器内部错误，请稍后重试');
    } else {
      // 其他错误
      alert(`请求失败：${error.response.data.message}`);
    }
    console.error('错误详情：', error);
  }
}

五、拦截器：请求与响应的统一处理

拦截器（Interceptor）是Axios的核心特性，允许在请求发送前（请求拦截器）和响应返回后（响应拦截器）进行统一处理，适用于添加token、加载提示、错误统一处理等场景。

5.1 请求拦截器

在请求发送前执行，可用于添加请求头（如token）、显示加载动画等：

javascript 复制代码 
// 添加请求拦截器
axios.interceptors.request.use(
  // 成功回调：请求发送前执行
  config => {
    // 示例1：添加token到请求头
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    
    // 示例2：显示加载动画
    document.getElementById('loading').style.display = 'block';
    
    return config; // 必须返回配置对象，否则请求会失败
  },
  // 失败回调：请求出错时执行（如参数错误）
  error => {
    // 隐藏加载动画
    document.getElementById('loading').style.display = 'none';
    return Promise.reject(error);
  }
);

5.2 响应拦截器

在响应返回后执行，可用于隐藏加载动画、统一处理错误等：

javascript 复制代码 
// 添加响应拦截器
axios.interceptors.response.use(
  // 成功回调：响应状态码2xx时执行
  response => {
    // 隐藏加载动画
    document.getElementById('loading').style.display = 'none';
    return response; // 必须返回响应对象，否则后续.then无法获取数据
  },
  // 失败回调：响应状态码非2xx时执行
  error => {
    // 隐藏加载动画
    document.getElementById('loading').style.display = 'none';
    
    // 示例：token过期时跳转到登录页
    if (error.response && error.response.status === 401) {
      localStorage.removeItem('token');
      window.location.href = '/login'; // 跳转登录页
    }
    
    return Promise.reject(error); // 传递错误到后续catch
  }
);

5.3 移除拦截器

若需临时禁用拦截器，可通过拦截器返回的ID移除：

javascript 复制代码 
// 添加拦截器并保存ID
const requestInterceptor = axios.interceptors.request.use(config => config);

// 移除拦截器
axios.interceptors.request.eject(requestInterceptor);

六、高级特性：请求取消与并发请求

6.1 请求取消

在某些场景（如用户快速切换标签、搜索框输入防抖），需要取消未完成的请求，避免资源浪费或数据错乱。

6.1.1 使用AbortController（推荐，ES6+）
javascript 复制代码 
// 创建控制器
const controller = new AbortController();
// 获取信号量
const signal = controller.signal;

// 发送请求时关联信号量
axios.get('/api/slow-data', { signal })
  .then(response => {
    console.log('请求成功：', response.data);
  })
  .catch(error => {
    if (error.name === 'CanceledError') {
      console.log('请求已取消');
    }
  });

// 3秒后取消请求（如用户切换页面）
setTimeout(() => {
  controller.abort(); // 取消请求
}, 3000);
6.1.2 旧版方式（使用CancelToken，已废弃但仍可用）
javascript 复制代码 
// 创建取消令牌
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

// 发送请求
axios.get('/api/slow-data', {
  cancelToken: source.token
})
.catch(error => {
  if (axios.isCancel(error)) {
    console.log('请求已取消：', error.message);
  }
});

// 取消请求（可传递取消原因）
source.cancel('用户主动取消');

6.2 并发请求处理

Axios提供了axios.all()和axios.spread()处理并发请求（同时发送多个请求，等待所有请求完成后处理）：

javascript 复制代码 
// 并发发送两个请求
axios.all([
  axios.get('/api/user/1'),
  axios.get('/api/posts')
])
.then(axios.spread((userResponse, postsResponse) => {
  // 两个请求都完成后执行
  console.log('用户数据：', userResponse.data);
  console.log('文章列表：', postsResponse.data);
}))
.catch(error => {
  console.error('至少一个请求失败：', error);
});

// 使用async/await处理并发（更直观）
async function fetchConcurrentData() {
  try {
    // 同时发送请求
    const [userResponse, postsResponse] = await Promise.all([
      axios.get('/api/user/1'),
      axios.get('/api/posts')
    ]);
    console.log('用户数据：', userResponse.data);
    console.log('文章列表：', postsResponse.data);
  } catch (error) {
    console.error('请求失败：', error);
  }
}

若这篇内容帮到你，动动手指支持下！关注不迷路，干货持续输出！

ヾ(´∀ ˋ)ﾉヾ(´∀ ˋ)ﾉヾ(´∀ ˋ)ﾉヾ(´∀ ˋ)ﾉヾ(´∀ ˋ)ﾉ

相关推荐
嘉琪0018 小时前
2025 js——面试题（7）——ajax相关
开发语言·javascript·ajax
AA-代码批发V哥1 天前
Ajax之核心语法详解
ajax
PythonicCC2 天前
Django核心知识点详解：JSON、AJAX、Cookie、Session与用户认证
ajax·django·json
gzzeason4 天前
Ajax：现代JS发起http通信的代名词
前端·javascript·ajax
一瓣橙子4 天前
7.7日 实验03-Spark批处理开发（2）
开发语言·javascript·ajax
爱喝水的小周5 天前
AJAX vs axios vs fetch
前端·javascript·ajax
The_cute_cat6 天前
Ajax和Axios的初步学习
前端·学习·ajax
旷世奇才李先生9 天前
AJAX 安装使用教程
前端·javascript·ajax
就改了9 天前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
热门推荐
01Java类变量（静态变量）02集群聊天服务器---MySQL数据库的建立03KGG转MP3工具|非KGM文件|解密音频04使用Ruby接入实时行情API教程05【无标题】06Coze扣子平台完整体验和实践（附国内和国际版对比）07绿色建筑新态势：楼宇自控助力能效提升，推动成本优化新路径08基于odoo17的设计模式详解---单例模式09扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解10基于uni-app的书法学习管理小程序的设计与实现