uniapp通讯封装

### UniApp 中的通讯封装 在构建基于 UniApp 的应用时，良好的网络通信模块对于提高代码可维护性和重用性至关重要。通过创建统一的 HTTP 请求工具类来管理 API 调用可以简化项目中的数据获取逻辑。 #### 创建 `http.js` 工具文件 为了实现更灵活且易于扩展的功能，在项目的根目录下新建名为 `common/api/http.js` 文件用于定义全局性的请求配置： ```javascript // common/api/http.js import axios from 'axios'; import { baseURL } from '@/config'; // 假设已有一个 config 配置项存储服务器地址等信息 const service = axios.create({ timeout: 5000, // 设置超时时长 headers: { "Content-Type": "application/json" }, }); service.interceptors.request.use( (config) => { const token = uni.getStorageSync('token'); // 获取本地缓存 Token if (token) { config.headers['Authorization'] = `Bearer ${token}`; } return config; }, error => Promise.reject(error)); export default function request(options){ let loadingInstance; options.method = options.method || 'get'; if (!options.loadingHidden && typeof options.loading === 'undefined') { loadingInstance = uni.showLoading({ title: '加载中...' }); } return new Promise((resolve, reject)=>{ service({...options}) .then(response=>{ setTimeout(() => { resolve(response.data); if(loadingInstance !== undefined){uni.hideLoading()} }, 800); // 模拟延迟关闭 Loading 效果 }) .catch(err=>{reject(err)}) }); } ``` 此部分实现了对 Axios 库的基础设置以及拦截器功能[^1]。每当发送请求前会自动附加认证令牌至头部字段；同时支持显示/隐藏等待提示框操作。 #### 定义接口方法 接着可以在同一级目录内继续建立具体业务的服务层文件夹并编写相应函数调用上述通用组件完成特定场景下的资源拉取工作： ```javascript // common/api/user.js import request from './http'; function login(params){ return request({ url:'/api/login', method:'post', data:params, loading:true }); } function getUserInfo(){ return request({ url:`/api/me`, method:"GET", loading:false }); } export default{ login, getUserInfo }; ``` 这里展示了两个简单的例子——登录验证与个人信息查询，它们都依赖于之前提到过的自定义 `request()` 函数来进行实际的数据交换过程[^2]。 #### 使用服务实例 最后一步就是在页面或其他地方引入这些预先准备好的 API 接口以便随时调用了： ```vue <template> <!-- 组件模板 --> </template> <script setup lang="ts"> import userService from "@/common/api/user"; async function handleLogin() { try { await userService.login({ username: 'test', password: 'password' }); console.log("登陆成功"); } catch (error) { console.error("登陆失败", error); } } </script> ``` 以上就是关于如何在 UniApp 开发环境中搭建一套高效稳定的 HTTP 请求框架的大致流程介绍。