Axios之核心语法详解

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对象：

<!-- 引入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等工程化项目：

# 安装
npm install axios --save
# 或
yarn add axios

引入使用：

// ES6模块引入
import axios from 'axios';

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

二、Axios的基础请求方法

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

2.1 基本语法：axios(config)

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

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的查询字符串）：

// 基础用法
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