Axios 对比 Fetch
介绍
在现代 Web 开发中，发送 HTTP 请求是一项基本任务。无论是从服务器获取数据、提交表单还是与 API 交互，都需要可靠的工具来处理这些操作。虽然 JavaScript 提供了内置的 fetch API 用于发送 HTTP 请求，但许多开发者为了获得更多功能和便利，会选择使用像 Axios 这样的第三方库。
为什么我们需要HTTP请求工具？
处理 HTTP 请求和响应可能非常复杂，尤其是在考虑错误处理、响应解析和请求配置时。Axios 和 Fetch 等工具通过提供抽象层和实用工具来简化这些任务，从而简化流程。它们有助于解决以下常见问题：
样板代码：简化重复性任务，例如设置请求头和处理 JSON 响应。
错误处理：提供更一致、更易于管理的错误处理机制。
拦截器：允许对请求或响应进行预处理，例如添加身份验证令牌。
获取 API
Fetch API 是一种现代化的、内置于 JavaScript 中的 HTTP 请求方法。它基于 Promise，与 XMLHttpRequest 等旧方法相比，提供了一种更直接的方式来处理异步操作。
例子
// Making a GET request using 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('There was a problem with the fetch operation:', error));
Axios
Axios 是一个流行的第三方 HTTP 请求库。它像 Fetch 一样基于 Promise，但包含许多额外的功能，使其更加便捷强大。
例子
// Making a GET request using Axios
axios.get('https://api.example.com/data')
.then(response => console.log(response.data))
.catch(error => console.error('There was a problem with the axios request:', error));
主要区别
1. JSON 的默认处理
- 获取：
需要手动将响应数据转换为 JSON 格式。
fetch('https://api.example.com/data')
.then(response => response.json()) // Manual conversion
.then(data => console.log(data));
- Axios：
自动解析 JSON 响应。
axios.get('https://api.example.com/data')
.then(response => console.log(response.data)); // Automatic conversion
2. 错误处理
- 获取：
仅因网络错误而拒绝 Promise，不会因 HTTP 错误（例如，404 或 500 状态码）而拒绝。
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.catch(error => console.error('Fetch error:', error));
- Axios：
对于网络错误和 HTTP 错误都会拒绝 Promise。
axios.get('https://api.example.com/data')
.catch(error => console.error('Axios error:', error));
3. 请求配置
- 获取：
需要手动配置选项，例如标头和方法
fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ key: 'value' })
});
- Axios：
提供更简洁易读的配置语法。
axios.post('https://api.example.com/data', { key: 'value' }, {
headers: {
'Content-Type': 'application/json'
}
});
拦截者
拦截器是 Axios 的一项强大功能，它允许您在请求或响应被处理之前对其进行拦截。拦截器对于诸如向每个请求添加身份验证令牌或全局处理错误等任务非常有用。
Axios拦截器示例
// Adding a request interceptor
axios.interceptors.request.use(config => {
// Add an authorization header to every request
const token = 'your_token';
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
}, error => {
// Handle request error
return Promise.reject(error);
});
// Adding a response interceptor
axios.interceptors.response.use(response => {
// Handle successful response
return response;
}, error => {
// Handle response error
if (error.response.status === 401) {
// Handle unauthorized error
console.error('Unauthorized');
}
return Promise.reject(error);
});
结论
Fetch 和 Axios 都是功能强大的 HTTP 请求工具，但它们在便捷性和功能性方面各有侧重。Fetch 是一款原生且现代化的工具，适用于简单的应用场景；而 Axios 则提供了更丰富的功能集，包括自动 JSON 处理、更完善的错误管理以及用于请求和响应操作的拦截器。选择哪一款取决于项目的具体需求以及您对简洁性和功能性的偏好。
通过了解每种工具的优势和差异，您可以做出更明智的决策，并编写更高效、更易于维护的代码。
文章来源：https://dev.to/wafa_bergaoui/axios-vs-fetch-543c