Axios 的基本使用与 Fetch 的比较、在 Vue 项目中使用 Axios 的最佳实践

1. 引言

在前端开发中，发起 HTTP 请求是与服务器交互的核心操作。Axios 和 Fetch 是两种常用的 HTTP 请求工具。本文将详细介绍 Axios 的基本用法，并对比其与原生 Fetch API 的区别，帮助开发者在实际项目中做出合适的选择。

---

2. Axios 的基本使用

话题	详细解释
Axios 的基本使用	Axios 是一个基于 Promise 的 HTTP 库，提供了丰富的功能用于简化网络请求操作，支持自动转换 JSON、请求拦截器等。

2.1 安装 Axios

Axios 可以通过 npm 安装，也可以直接通过 CDN 链接引入。

• 使用 npm 安装：

  npm install axios
  

• 通过 CDN 引入：

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  

2.2 发起 GET 请求

Axios 发起 GET 请求非常简单，直接使用 axios.get 方法，接收 URL 作为参数。

axios.get('https://api.example.com/data').then(response => {console.log(response.data);}).catch(error => {console.error(error);});

2.3 发起 POST 请求

对于 POST 请求，使用 axios.post 方法，传入请求 URL 和请求数据：

axios.post('https://api.example.com/data', {name: 'John Doe',age: 25}).then(response => {console.log(response.data);}).catch(error => {console.error(error);});

2.4 请求拦截器

Axios 提供了请求和响应拦截器，可以在请求发送前或响应返回后对数据进行处理。

// 请求拦截器
axios.interceptors.request.use(config => {config.headers.Authorization = 'Bearer token';return config;
}, error => {return Promise.reject(error);
});// 响应拦截器
axios.interceptors.response.use(response => {return response;
}, error => {return Promise.reject(error);
});

2.5 设置全局配置

可以为所有 Axios 请求设置全局默认配置，如请求的基准 URL、请求超时时间等：

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 10000;  // 10秒超时

---

3. Axios 与 Fetch 的比较

话题	详细解释
Axios 与 Fetch 的比较	Axios 是一个完整的 HTTP 库，而 Fetch 是浏览器内置的原生 API，它们在功能、用法和兼容性方面有显著区别。

3.1 Axios 与 Fetch 的异同点

特点	Axios	Fetch
返回值	默认返回已经 JSON 解析的数据，无需手动调用 .json() 方法	需要手动调用 response.json() 方法来解析 JSON 数据
支持的浏览器	支持更广泛的浏览器，兼容性较好，支持旧版浏览器	仅支持现代浏览器，IE 浏览器不支持 Fetch
自动 JSON 转换	自动处理 JSON 数据	不自动处理 JSON，需要手动解析
请求拦截和响应拦截	支持请求和响应拦截器，方便在请求前后处理数据	不支持拦截器，需要手动实现
错误处理	自动捕获 4XX 和 5XX 错误并抛出到 catch 中	需要手动检查 response.ok 来判断是否是错误状态
取消请求	支持通过 axios.CancelToken 取消请求	原生 Fetch 不支持取消请求，必须借助 AbortController 实现
请求配置	使用统一的配置对象，提供了更多选项，如 timeout、自定义请求头等	需要手动配置请求头和其他选项，且没有内置超时功能
跨域请求	支持处理跨域请求并自动携带 cookie	默认不携带 cookie，需要手动配置 credentials: 'include'

3.2 Fetch 的基本使用

Fetch 是原生 JavaScript API，使用 Fetch 发起请求较为简单，但需要更多的手动配置。

fetch('https://api.example.com/data').then(response => {if (!response.ok) {throw new Error('Network response was not ok');}return response.json();}).then(data => {console.log(data);}).catch(error => {console.error('Fetch error:', error);});

3.3 使用 Fetch 处理 POST 请求

与 GET 请求类似，Fetch 发起 POST 请求时需要手动设置请求方法和请求头。

fetch('https://api.example.com/data', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({name: 'John Doe',age: 25})
})
.then(response => response.json())
.then(data => {console.log(data);
})
.catch(error => {console.error('Fetch error:', error);
});

---

4. 讨论在 Vue 项目中使用 Axios 的最佳实践

话题	详细解释
讨论在 Vue 项目中使用 Axios 的最佳实践	在 Vue 项目中，Axios 的使用非常普遍，它能简化与 API 的交互，并且易于与 Vue 的生命周期钩子、状态管理等集成。

4.1 将 Axios 集成到 Vue 项目中

通常在 Vue 项目中，我们会将 Axios 配置封装为一个模块，便于全局调用，并且可以统一处理请求和响应。

// src/services/api.js
import axios from 'axios';const api = axios.create({baseURL: 'https://api.example.com',timeout: 5000,
});api.interceptors.request.use(config => {// 在请求前统一处理config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;return config;
});api.interceptors.response.use(response => response,error => {// 在响应错误时统一处理console.error('API error:', error);return Promise.reject(error);}
);export default api;

4.2 在组件中使用 Axios

在 Vue 组件中，可以直接导入封装好的 Axios 实例进行调用：

<script>
import api from '@/services/api';export default {data() {return {userData: null,};},created() {this.fetchUserData();},methods: {async fetchUserData() {try {const response = await api.get('/user');this.userData = response.data;} catch (error) {console.error('Error fetching user data:', error);}}}
}
</script>

---

5. 总结

Axios 和 Fetch 都是发起 HTTP 请求的有效工具。Axios 提供了更加全面的功能，如请求拦截器、自动 JSON 解析、错误处理和取消请求，适合复杂应用场景。Fetch 作为原生 API，轻量但需要更多的手动配置。在 Vue 项目中，使用 Axios 作为默认的请求工具是较为普遍的选择，能显著提升开发效率。