uniapp vue3封装request请求
时间: 2025-02-16 12:14:17 浏览: 53
UniApp是一个基于Vue.js的跨平台应用开发框架,它允许开发者构建一套代码可以在微信小程序、H5、App等多端运行的应用。在Vue 3版本中,封装网络请求通常会创建一个统一的`httpService`或者`api`模块,以便于管理和复用HTTP操作。
下面是一个简单的例子,展示如何在Vue 3的uni-app中封装axios作为request请求:
```javascript
import axios from 'axios';
import { defineComponent } from 'vue';
// 创建一个axios实例并配置默认选项
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 5000, // 请求超时时间
headers: {
'Content-Type': 'application/json',
},
});
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么
return config;
},
error => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
service.interceptors.response.use(
response => {
// 对响应数据做处理
return response.data;
},
error => {
// 对响应错误做处理
console.log('Error:', error); // for debug
return Promise.reject(error);
}
);
export default {
async post(url, data) {
try {
const res = await service.post(url, data);
return res;
} catch (error) {
console.error('Error', error);
throw new Error('Failed to make request');
}
},
// ...其他请求方法,如get、delete等
};
```
然后在组件中,你可以通过导入这个文件,像这样使用封装好的请求:
```javascript
import { post } from '@/services/api'; //假设你在src/api目录下
export default defineComponent({
methods: {
fetchData() {
post('/your-endpoint').then(response => {
console.log(response);
}).catch(error => {
console.error(error.message);
});
},
},
});
```
阅读全文
相关推荐

















