uniapp 服务文件
uniapp 服务文件创建与管理
在uniapp中，服务文件通常用于封装通用的业务逻辑、API请求或工具函数，便于全局调用和维护。以下是创建和管理服务文件的方法。
创建服务文件
在项目的根目录或common文件夹下新建一个service目录，用于存放服务文件。例如创建一个api.service.js文件：
// common/service/api.service.js
const baseUrl = 'https://example.com/api';
export default {
getList(params) {
return uni.request({
url: `${baseUrl}/list`,
method: 'GET',
data: params
});
},
postData(data) {
return uni.request({
url: `${baseUrl}/submit`,
method: 'POST',
data: data
});
}
};全局引入服务文件
在main.js中全局引入服务文件，方便在各页面直接调用：
// main.js
import apiService from '@/common/service/api.service.js';
Vue.prototype.$api = apiService;页面中使用服务
在页面或组件中直接通过this.$api调用服务方法：
export default {
methods: {
async fetchData() {
try {
const res = await this.$api.getList({ page: 1 });
console.log(res.data);
} catch (error) {
console.error(error);
}
}
}
};服务文件模块化
将不同业务逻辑拆分为多个服务文件，例如user.service.js和order.service.js，按需引入：
// common/service/user.service.js
export default {
login(data) {
return uni.request({
url: '/user/login',
method: 'POST',
data: data
});
}
};请求拦截与响应处理
在服务文件中统一处理请求和响应，例如添加token或错误处理：
// common/service/http.service.js
uni.addInterceptor('request', {
invoke(args) {
args.header = {
...args.header,
'Authorization': 'Bearer ' + uni.getStorageSync('token')
};
},
fail(err) {
console.error('请求失败:', err);
}
});注意事项
- 服务文件应保持单一职责，避免过度耦合。
- 异步请求使用
async/await或Promise处理。 - 大型项目可使用
axios等库替代uni.request，但需注意跨平台兼容性。
通过以上方法，可以高效管理uniapp中的服务文件，提升代码复用性和可维护性。
