Vue 3 发起 HT两种方式·尤其是在浏览器和·- 需要轻量级的请求处理
作者：编程小白 |
发布时间：2025-06-20 |
Vue 3 发起 HTTP 请求的两种方式
在 Vue 3 中，我们可以使用两种主流的方法来发起 HTTP 请求：Axios 和 Fetch API。这两种方法各有特点，适用于不同的场景。
Axios
Axios 是一个基于 Promise 的 HTTP 客户端，适用于多种场景，尤其是在浏览器和 Node.js 环境下使用。
1. 安装和基本使用
首先，我们需要安装 Axios：
```bash
npm install axios
```
然后在 Vue 组件或其他 JavaScript 文件中引入并使用：
```javascript
import axios from 'axios';
axios.get('/api/data').then(response => {
console.log(response.data);
}).catch(error => {
console.error('Error fetching data:', error);
});
```
2. 配置
可以通过创建 Axios 实例来设置全局配置：
```javascript
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 1000,
headers: { 'Authorization': 'Bearer token' }
});
```
3. 拦截器
Axios 拦截器可以在请求或响应被处理之前拦截它们：
```javascript
axios.interceptors.request.use(config => {
// Do something before request is sent
return config;
}, error => {
// Do something with request error
return Promise.reject(error);
});
axios.interceptors.response.use(response => {
// Do something with response data
return response;
}, error => {
// Do something with response error
return Promise.reject(error);
});
```
Fetch API
Fetch API 是现代浏览器内置的原生方法，提供简洁的语法和广泛的浏览器支持。
1. 基本使用
```javascript
fetch('/api/data')
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error fetching data:', error);
});
```
2. 设置请求选项
可以通过第二个参数来设置请求选项：
```javascript
fetch('/api/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error fetching data:', error);
});
```
3. 处理错误
Fetch API 不会自动处理 HTTP 错误状态，需要手动检查：
```javascript
if (!response.ok) {
throw new Error('Network response was not ok');
}
```
4. 取消请求
可以通过 `` 来取消 Fetch 请求：
```javascript
const controller = new AbortController();
fetch('/api/data', { signal: controller.signal })
.then(response => {
// Handle the response
})
.catch(error => {
if (error.name === 'AbortError') {
console.log('Fetch aborted');
}
});
// To cancel the fetch
controller.abort();
```
Axios VS Fetch API
以下是 Axios 和 Fetch API 的对比表格：
| 特性 | Axios | Fetch API |
|--------------|------------------------|-------------------|
| 支持浏览器和 Node.js | 是 | 否 |
| 基于 Promise | 是 | 是 |
| 拦截器支持 | 是 | 否（需手动实现） |
| 自动处理 JSON | 是 | 否（需手动调用） |
| 取消请求 | 是 | 是（通过 controller）|
| 并发请求 | 是（需手动实现） | 否（需手动实现） |
| 请求/响应转换 | 是 | 否 |
从表格可以看出，Axios 在功能上更为全面，而 Fetch API 更适合轻量级的、无需复杂配置的请求场景。
选择指南
1. 使用 Axios 的场景：
- 需要在浏览器和 Node.js 中都使用同一套代码。
- 需要使用拦截器来处理请求或响应。
- 需要处理并发请求。
- 需要自动转换 JSON 数据。
2. 使用 Fetch API 的场景：
- 只需要在浏览器中发起请求。
- 需要轻量级的请求处理。
- 需要原生的、没有外部依赖的解决方案。
实例说明
1. 使用 Axios 获取数据并更新 Vue 组件状态
```javascript
// Vue 组件中
methods: {
fetchData() {
axios.get('/api/data').then(response => {
this.data = response.data;
}).catch(error => {
console.error('Error fetching data:', error);
});
}
}
```
2. 使用 Fetch API 获取数据并更新 Vue 组件状态
```javascript
// Vue 组件中
methods: {
fetchData() {
fetch('/api/data')
.then(response => response.json())
.then(data => {
this.data = data;
})
.catch(error => {
console.error('Error fetching data:', error);
});
}
}
```
在 Vue 3 中，你可以选择 Axios 或 Fetch API 来发起 HTTP 请求。根据你的项目需求，选择合适的工具可以提高开发效率和代码质量。