Axios简介·HTTP·默认将请求数据和响应数据转换为 JSON 格式

作者：机器人技术佬 | 发布时间：2025-07-09 |

一、Axios简介

Axios 是一个基于 Promise 的 HTTP 库，它既可以在浏览器中使用，也可以在 Node.js 环境下运行。它有几个主要特点：

支持 Promise API，让异步操作更简单。
可以拦截请求和响应，在处理前进行修改。
自动转换 JSON 数据。
支持取消请求，便于组件销毁时取消未完成的请求。
默认将请求数据和响应数据转换为 JSON 格式。
提供客户端支持防御 CSRF 攻击。

二、Axios在Vue中的安装和使用

1. 安装Axios

你可以使用 npm 或 yarn 来安装 Axios：

npm install axios

2. 在Vue组件中使用Axios

在 Vue 组件中，你可以通过 import 导入 Axios，然后在组件的 methods 或生命周期钩子中使用：

import axios from 'axios'; methods: { fetchData() { axios.get('/api/data') .then(response => { // 处理响应数据 }) .catch(error => { // 处理错误 }); } }

三、Axios的高级用法

1. 全局配置

你可以在项目的入口文件中设置 Axios 的全局默认配置：

axios.defaults.baseURL = ''; axios.defaults.headers.common['Authorization'] = 'Bearer token';

2. 请求和响应拦截器

你可以使用拦截器在请求发送前或响应接收后进行操作：

axios.interceptors.request.use(config => { // 在发送请求之前做些什么 return config; }, error => { // 对请求错误做些什么 return Promise.reject(error); }); axios.interceptors.response.use(response => { // 对响应数据做点什么 return response; }, error => { // 对响应错误做点什么 return Promise.reject(error); });

3. 取消请求

你可以使用 Axios 的取消功能，例如在组件销毁时取消未完成的请求：

const CancelToken = axios.CancelToken; let cancel; axios.get('/api/data', { cancelToken: new CancelToken(function executor(c) { // executor 函数接收一个取消函数作为参数 cancel = c; }) }); // 取消请求 cancel('Operation canceled by the user.');

四、AXIOS与VUEX结合使用

在大型项目中，通常会将请求逻辑与 Vuex 状态管理结合起来，实现更好的状态管理和数据流控制：

在 Vuex 中进行状态管理
在组件中派发 Action

五、实例说明和数据支持

1. 实例说明

以一个博客应用为例，我们需要从 API 获取博客文章列表并展示在页面上。使用 Axios 可以轻松实现这个需求：

axios.get('/api/articles') .then(response => { this.articles = response.data; }) .catch(error => { console.error('There was an error!', error); });

2. 数据支持

根据 GitHub 上的数据，Axios 是一个非常受欢迎的 HTTP 库，拥有超过 80,000 颗星标，这表明它在开发者社区中得到了广泛的使用和信赖。Axios 的维护也非常积极，定期发布更新和修复问题，确保了其在不断发展的 Web 环境中的适用性和稳定性。

六、总结与建议

总结：Vue 中常用的请求库是 Axios，因为它提供了简洁的 API、良好的 Promise 支持、请求和响应拦截器、取消请求功能等多种实用特性，极大地简化了 HTTP 请求的处理过程。

建议：在实际开发中，建议将 Axios 的全局配置和拦截器设置在项目的入口文件中，以确保请求的统一处理。同时，对于复杂的项目，可以将请求逻辑与 Vuex 结合起来，实现更清晰的代码结构和更好的数据管理。最后，充分利用 Axios 的取消请求功能，以确保在组件销毁时能够及时取消未完成的请求，避免内存泄漏和不必要的请求开销。

请求方式	用途
GET	从服务器获取数据
POST	向服务器发送数据
PUT	更新服务器上的数据
DELETE	删除服务器上的数据