一、引言
在现代 Web 开发中，与服务器进行数据交互是必不可少的一环。无论是获取远程数据还是提交表单信息，HTTP 请求都是最常用的方式之一。为了简化这一过程，许多 JavaScript 库应运而生，其中 Axios 凭借其简洁易用的 API 和强大的功能特性脱颖而出。本文将带领读者深入了解 Axios 的使用方法，并通过实际案例演示如何高效地完成各种类型的 HTTP 请求。
二、Axios 简介
Axios 是一个基于 Promise 的 HTTP 客户端库，支持浏览器和 Node.js 环境。它具有以下特点：
- 支持所有浏览器：兼容 IE8+ 及主流现代浏览器。
- 自动转换 JSON 数据：发送和接收的数据会自动被转换为 JSON 格式。
- 取消请求：可以随时取消正在进行的请求。
- 拦截器：允许对请求或响应进行预处理。
- 客户端支持防止 CSRF/XSRF 攻击：内置了相关机制确保安全性。
三、安装与引入
1. 安装 Axios
对于前端项目，可以通过 npm 或 yarn 安装 Axios：
npm install axios
或者
yarn add axios
对于 HTML 页面，可以直接引用 CDN 文件：
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
2. 引入 Axios
在 ES6 模块环境中，可以这样引入：
import axios from 'axios';
在 CommonJS 环境（如 Node.js）中，则使用 require 方法：
const axios = require('axios');
四、发送 GET 请求
GET 请求用于从服务器获取资源，是最常见的 HTTP 请求类型之一。下面是一个简单的例子，展示了如何使用 Axios 发送 GET 请求：
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.error(error);
});
如果需要传递多个查询参数，可以使用对象形式：
axios.get('/user', {
params: {
ID: 12345,
name: 'John'
}
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.error(error);
});
五、发送 POST 请求
POST 请求通常用于向服务器提交数据，例如创建新记录或更新现有信息。以下是发送 POST 请求的基本语法：
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.error(error);
});
需要注意的是，在发送 POST 请求时，Axios 默认会将请求体设置为 application/json 类型。如果您想发送其他格式的数据（如表单编码），可以通过配置 headers 来指定内容类型：
axios.post('/user', qs.stringify({
firstName: 'Fred',
lastName: 'Flintstone'
}), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
}
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.error(error);
});
六、使用拦截器
拦截器是 Axios 的一个重要特性，它允许我们在请求发出之前或响应返回之后对其进行修改。这对于统一处理请求头、添加认证信息、日志记录等场景非常有用。以下是设置请求和响应拦截器的例子：
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
七、错误处理
尽管我们可以在每个请求的 .catch() 中单独处理错误，但更推荐的做法是利用全局错误处理机制。这样不仅可以减少重复代码，还能确保整个应用的一致性。除了前面提到的拦截器外，还可以结合 try...catch 语句来捕获异步操作中的异常：
async function fetchData() {
try {
const response = await axios.get('/user');
console.log(response.data);
} catch (error) {
if (error.response) {
// 请求已发出，但服务器响应的状态码不在 2xx 范围内
console.error('Server Error:', error.response.status);
} else if (error.request) {
// 请求已发出，但没有收到任何响应
console.error('Network Error');
} else {
// 其他情况
console.error('Error:', error.message);
}
}
}
八、并发请求
有时候我们需要同时发起多个请求，并等待它们全部完成后再继续执行后续逻辑。Axios 提供了 axios.all() 和 axios.spread() 方法来简化这一过程：
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都已完成
console.log(acct.data, perms.data);
}))
.catch(function (errors) {
// 处理错误
console.error(errors);
});
九、配置项详解
Axios 支持多种配置项，可以根据具体需求灵活调整请求行为。常用的配置项包括但不限于：
url: 请求的 URL 地址。method: 请求方法，默认为get。baseURL: 基础 URL，可与url组合使用。headers: 自定义请求头。params: 查询参数。data: 请求体数据（适用于 POST、PUT 等方法）。timeout: 设置超时时间（毫秒）。withCredentials: 是否携带凭证（如 cookies）。auth: 基本认证信息。
例如，我们可以创建一个自定义实例，设置默认的基础 URL 和请求头：
const instance = axios.create({
baseURL: 'https://some-domain.com/api/',
headers: {'X-Custom-Header': 'foobar'}
});
instance.get('/user/12345')
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.error(error);
});
十、总结
通过本文的介绍，相信您已经掌握了 Axios 的基本用法及其一些高级特性。作为一个轻量级且功能丰富的 HTTP 客户端库，Axios 不仅能够满足日常开发中的大部分需求，还提供了诸如拦截器、并发请求等功能来提升开发效率。无论是在浏览器端还是 Node.js 环境下，Axios 都是一个值得信赖的选择。未来，随着 Web 技术的发展，期待 Axios 能够持续改进，为开发者带来更多惊喜！
