uniapp有vue2的封装接口教程

UniApp提供了Vue 2风格的API封装教程，主要目的是简化网络请求过程。以下是步骤：

1. **创建API模块**[^1]:
- 在项目中创建一个名为`api`的文件夹（通常是`src/api`），然后新建一个`api.js`文件。
- 导入`Request`工具（通常来自`@/utils/request.js`）和`config`信息（如服务器基础URL）。
- 定义一个对象，其中包含了你要封装的方法，比如`get_new_tips`，这是一个获取新提示的例子：

     export default {
       get_new_tips: function(params) {
         return Request.httpTokenRequest({
           url: `${config.baseUrl}/index/get_new_tips`, // 使用baseUrl动态拼接URL
           method: 'GET',
           params: params,
         });
       },
     }

2. **配置基础URL**:
- 在项目的`utils`文件夹里创建一个`config.js`文件，用于存储服务器地址。
- 根据环境（开发或生产）设置不同的域名，如：

     let baseUrl = "";
     // ...其他配置...
     if (process.env.NODE_ENV === 'development') {
       baseUrl = 'https://××××××.com';
     } else {
       baseUrl = 'https://××××××.com';
     }
     export default { baseUrl };

3. **在组件中调用封装后的接口**:
- 在Vue组件中导入`api.js`模块，可以直接通过导出的对象来调用接口，例如：

     import api from '@/api';

     data() {
       return {
         tips: [],
       };
     },
     
     created() {
       this.getNewTips();
     },
     
     methods: {
       async getNewTips() {
         const res = await api.get_new_tips({ param1: 'value1' }); // 带上参数
         this.tips = res.data; // 处理返回的数据
       },
     }