uniapp 服务文件

uniapp 服务文件的概念

在 uniapp 中，服务文件通常指用于封装业务逻辑、接口请求或通用功能的 JavaScript 文件。这类文件通常存放在项目的 common 或 utils 目录下，便于全局调用。

创建服务文件的步骤

目录结构建议
将服务文件存放在 common/service 或 utils 目录中，例如：

├── common  
│   ├── service  
│   │   ├── api.js        // 接口请求封装  
│   │   ├── util.js       // 通用工具函数  

封装接口请求示例
在 api.js 中封装 HTTP 请求，使用 uni.request 或第三方库（如 axios 的适配器）：

// common/service/api.js  
const baseURL = 'https://example.com/api';  

export const getData = (params) => {  
    return new Promise((resolve, reject) => {  
        uni.request({  
            url: `${baseURL}/data`,  
            method: 'GET',  
            data: params,  
            success: (res) => resolve(res.data),  
            fail: (err) => reject(err)  
        });  
    });  
};  

调用服务文件
在页面或组件中引入并使用：

import { getData } from '@/common/service/api.js';  

export default {  
    methods: {  
        async fetchData() {  
            try {  
                const data = await getData({ id: 1 });  
                console.log(data);  
            } catch (error) {  
                console.error(error);  
            }  
        }  
    }  
};  

服务文件的扩展功能

全局挂载
在 main.js 中将服务方法挂载到 Vue 原型上，方便全局调用：

import * as api from './common/service/api.js';  
Vue.prototype.$api = api;  

使用示例

this.$api.getData({ id: 1 }).then(res => {  
    console.log(res);  
});  

注意事项

1. 跨平台兼容性：确保封装的逻辑在 H5、小程序等平台均可运行。
2. 错误处理：统一处理接口错误，例如通过拦截器返回标准化错误信息。
3. 模块化：按功能拆分服务文件，避免单个文件过于庞大。

通过合理组织服务文件，可以提升代码复用性和可维护性。