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方法的快捷函数：

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.log('用户数据：', response.data);
  } catch (error) {
    console.error('获取失败：', error);
  }
}
getUser();

2.2.2 POST请求：提交数据

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

// 提交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 常用配置项

3.2 配置方式

3.2.1 全局默认配置

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

// 设置全局基础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实例，每个实例有独立配置：

// 创建实例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的响应对象包含服务器返回的数据及请求相关信息，主要属性：

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：

axios.get('/api/user')
  .catch(error => {
    if (!error.response) {
      // 网络错误
      console.error('网络错误：', error.message);
    }
  });

4.2.2 HTTP错误（有响应但状态码异常）

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

axios.get('/api/user')
  .catch(error => {
    if (error.response) {
      // HTTP错误
      console.error('状态码：', error.response.status); // 如404
      console.error('错误数据：', error.response.data); // 服务器返回的错误信息
    }
  });

4.2.3 完整错误处理示例

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）、显示加载动画等：

// 添加请求拦截器
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 响应拦截器

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

// 添加响应拦截器
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移除：

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

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

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

6.1 请求取消

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

6.1.1 使用AbortController（推荐，ES6+）

// 创建控制器
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，已废弃但仍可用）

// 创建取消令牌
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()处理并发请求（同时发送多个请求，等待所有请求完成后处理）：

// 并发发送两个请求
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);
  }
}

若这篇内容帮到你，动动手指支持下！关注不迷路，干货持续输出！
ヾ(´∀ ˋ)ﾉヾ(´∀ ˋ)ﾉヾ(´∀ ˋ)ﾉヾ(´∀ ˋ)ﾉヾ(´∀ ˋ)ﾉ