网站外链带nofollow是什么意思,wordpress导航栏目,wordpress时钟,win2012 网站建设深入理解 Uniapp 小程序接口封装与使用
在 Uniapp 小程序开发中#xff0c;接口请求是获取和交互数据的关键部分。合理地封装接口不仅能提高代码的可维护性#xff0c;还能增强项目的健壮性。今天#xff0c;我们就来详细探讨一下如何在 Uniapp 中进行接口封装、引入以及使…深入理解 Uniapp 小程序接口封装与使用
在 Uniapp 小程序开发中接口请求是获取和交互数据的关键部分。合理地封装接口不仅能提高代码的可维护性还能增强项目的健壮性。今天我们就来详细探讨一下如何在 Uniapp 中进行接口封装、引入以及使用。
一、接口封装原理
接口封装的核心目的是将复杂的请求逻辑进行抽象使得在不同页面调用接口时更加简洁和统一。通过封装我们可以集中处理诸如请求地址拼接、请求头设置、加载状态管理、错误处理以及登录状态验证等通用操作。
二、具体实现步骤
一创建请求封装文件
在 utils 目录下创建 request.js 文件这是我们接口封装的核心代码所在。
// const BASEURL http://xxx.xxx
const BASEURL https://xxx.xxx.fun;/** 全局请求封装* param path 请求路径* param method 请求类型(GET/POST/DELETE等)* param data 请求体数据* param loading 请求未完成是是否显示加载中默认为true* param needToken 是否需要token默认为false*/
export default (path, method, data {}, loading true, needToken false) {// 获取存储tokenconst token uni.getStorageSync(token);// 判断token是否存在且接口是否需要tokenif (!token needToken) {// const showToastMessage (message) {// uni.showToast({// icon: none,// title: message// });// };// showToastMessage(请登录后操作);return;}if (loading) {uni.showLoading({title: 加载中,mask: true});};// 根据接口是否需要token以及token是否存在来决定调用的请求函数if (needToken token! ) {return tokenRequest(path, method, data, loading, token)} else {return noTokenRequest(path, method, data, loading)}
};// 无token时发送请求函数
function noTokenRequest(path, method, data, loading) {return new Promise((resolve, reject) {uni.request({url: BASEURL path,method: method,data,success(response) {// console.log(响应拦截);if (response.statusCode 401) {// 若本地存在token清除tokenconst token uni.getStorageSync(token);if (token) {// uni.removeStorageSync(token);}// 提示用户请先登录uni.showToast({icon: none,title: 请登录后操作,duration: 1000});return// 去登录}resolve(response.data);},fail(err) {uni.showToast({icon: none,title: 服务响应失败});console.error(err);reject(err);},complete() {uni.hideLoading();}});});
}// 有token时发送请求函数
function tokenRequest(path, method, data, loading, token) {return new Promise((resolve, reject) {uni.request({url: BASEURL path,method: method,data,header: {token: token},success(response) {if (response.statusCode 401) {// 清除本地存储的token// uni.removeStorageSync(token);// 提示用户请先登录// uni.showToast({// icon: none,// title: 请登录后操作,// duration: 1000// });return// 去登录}// console.log(response.data);resolve(response.data);},fail(err) {uni.showToast({icon: none,title: 服务响应失败});console.error(err);reject(err);},complete() {uni.hideLoading();}});});
}export {BASEURL
}
代码解析
基础 URL 定义首先定义了 BASEURL这是所有接口请求的基础地址。在实际项目中根据后端接口的部署地址进行修改。全局请求封装函数export default 导出的函数接收五个参数分别是请求路径 path、请求类型 method、请求体数据 data、是否显示加载状态 loading 以及是否需要 token 的标识 needToken。在函数内部首先获取本地存储的 token如果接口需要 token 但 token 不存在则直接返回提示用户登录这里的提示代码被注释实际使用时可根据需求开启。如果 loading 为 true则显示加载提示。最后根据是否需要 token 以及token 是否存在调用不同的请求函数。无token请求函数 noTokenRequest返回一个 Promise使用 uni.request 发起请求。在成功回调中如果响应状态码为 401表示未授权若本地存在 token则清除注释部分可根据需求启用并提示用户登录。若请求成功将响应数据通过resolve返回。在失败回调中显示错误提示并通过 reject 抛出错误。无论请求成功与否在 complete 回调中隐藏加载提示。有token请求函数 tokenRequest与 noTokenRequest 类似只是在请求头中添加了 token。
二创建业务接口文件
在utils目录下创建 user.js 文件用于定义与用户相关的接口。
import request from ./request.js; // 封装的request.js文件的位置export const checkUser (data) {return request(/api/xxx/xxx, POST, data, true, true)
}代码解析 通过导入 request.js 中封装的请求函数定义了 checkUser 接口函数。该函数调用 request 并传入特定的请求路径、请求类型、请求数据、是否显示加载以及是否需要 token 等参数从而实现对用户相关接口的封装。
三、接口的引入与使用
一在页面中引入接口
在 page/index/index.vue 页面中引入 user.js 中定义的接口。
import {checkUser
} from /utils/api/user.js二在页面方法中使用接口
async handleSend() {try {const res await checkUser(this.id);// 这里可以对接口返回的数据进行进一步处理} catch (error) {// 捕获接口请求过程中的错误console.error(接口请求错误:, error);}
}代码解析
使用 async/await 语法来处理异步请求使得代码看起来更像是同步执行提高代码的可读性。在 try 块中调用 checkUser 接口并传入 this.section_id 作为请求数据。接口返回的数据会赋值给 res之后可以对res进行进一步的数据处理和业务逻辑操作。在catch块中捕获接口请求过程中可能出现的错误并进行相应的错误处理比如在控制台打印错误信息。
四、总结
通过上述步骤我们完成了 Uniapp小程序中接口的封装、引入和使用。这种封装方式使得代码结构更加清晰每个部分各司其职便于维护和扩展。在实际项目中我们可以根据不同的业务模块创建更多的接口文件进一步细化接口封装提高开发效率。
希望这篇文章能帮助大家更好地掌握 Uniapp 小程序接口相关的开发技巧。如果在实践过程中有任何疑问或遇到问题欢迎随时交流讨论。
