vue3封装请求接口
时间: 2024-09-11 14:10:57 浏览: 48
Vue 3 封装请求接口通常是通过创建一个通用的请求模块来完成的,这个模块会依赖于某个 HTTP 客户端库,例如axios。封装请求接口可以让我们在不同的组件中以统一的方式调用 API,同时也可以集中处理错误、加载状态和配置信息等。
以下是一个简单的 Vue 3 封装请求接口的示例步骤:
1. 安装axios库:
```
npm install axios
```
2. 创建一个`api`目录,在其中创建一个`request.js`文件来封装请求函数。
3. 在`request.js`中编写封装请求的代码,例如:
```javascript
import axios from 'axios';
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // API的base_url
timeout: 5000 // 请求超时时间
});
// 请求拦截器
service.interceptors.request.use(
config => {
// 在这里可以添加一些请求头信息,例如token等
return config;
},
error => {
console.error(error); // 对请求错误做些什么
return Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
response => {
const res = response.data;
// 根据不同状态码进行不同的错误处理
if (res.code !== 200) {
// 对响应数据做点什么
console.log('Error: ' + res.message);
return Promise.reject(new Error(res.message || 'Error'));
} else {
return res;
}
},
error => {
console.error(error); // 对响应错误做点什么
return Promise.reject(error);
}
);
export default service;
```
4. 在需要使用API的组件中导入封装好的请求模块,并进行请求调用,例如:
```javascript
import request from '@/api/request';
export function fetchData() {
return request({
url: '/some-endpoint',
method: 'get'
});
}
```
通过上述步骤,我们就可以在Vue 3项目中封装并重用请求接口,同时处理了请求和响应的统一逻辑。
阅读全文