基础函数基础函数的作用是将 wx.request 封装成 Promise 对象,通过 export 对外输出。/*** 请求业务接口基本方法** @param {Object} [data={}] – 对应wx.request里data参数* @param {Object} [opts={}] – 对应wx.request里其他参数* @returns {Promise}*/export function fetch(data = {}, opts = {}) { // 通用设置 const options = { url: ‘https://api.youapp.com/’ header: { ‘cookie’: `your_key=your_value;` } } return new Promise((resolve, reject) => { wx.request({ …Object.assign(options, opts), data, success: function(res) { resolve(res); }, fail: function(err) { reject(err); } }) }) .then(checkStatus) .catch(() => { // do something })}全局异常处理业务接口往往会设置一个标志位,告诉请求方请求是否异常。因为标志位是事先约定好的,所以可以在全局处理异常。示例函数中code为标志位,当code为0时,返回数据;当code不为0时,属于异常情况。这里,处理异常的方法是跳转一个错误页面,可根据项目要求自行设置处理方法。/*** 接口返回值状态判断** @param {Object} response – 接口返回值* @returns {Promise}*/function checkStatus(response) { let msg = ”; if (response.statusCode >= 200 && response.statusCode < 300) { let { code } = response.data switch (code) { case 0: // 请求成功,返回一个Promise对象 return Promise.resolve(response.data); break; case 1: // 处理token过期的情况 wx.removeStorageSync(“token”); msg = ‘哎哟,登录超时,刷新试试’; break; default: msg = ‘哎哟,服务异常,刷新试试’; break; } } // 防止重复跳转 if (getCurrentPageUrl() != ‘pages/error/error’){ wx.navigateTo({ url: `/pages/error/error?msg=${msg}` }); }}/*** 获取当前页面url* @returns {String} 当前页面url*/function getCurrentPageUrl(){ let pages = getCurrentPages() //获取加载的页面 let currentPage = pages[pages.length-1] //获取当前页面的对象 return currentPage.route //当前页面url}带Token的请求函数有些业务接口需要携带用户信息。微信小程序通过 token 传递用户信息,具体流程请见小程序官方文档。因此,我们还需要封装一个带Token的请求函数。实现方法是将token存在storage中,每次请求时判断token是否存在。若存在,直接发起请求;若不存在,则先获取token,再发起请求。这里还能用到上面已经封装好的基础函数,来简化函数。/*** 带token的请求业务接口** @param {Object} [data={}] – 对应wx.request里data参数,也就是query部分* @param {Object} [opts={}] – 对应wx.request里其他参数* @returns {Promise}*/export function fetchWithToken(data = {}, opts = {}) { const token = wx.getStorageSync(‘token’); if (token) { data.token = token; return fetch(data, opts) } else { return getToken().then((token) => { data.token = token; return fetch(data, opts); }) }}根据微信的登录流程,需要通过 wx.login 获取临时凭证(code),然后用code向后台兑换token,因此 getToken 函数的逻辑是这样的:/*** 获取token* @returns {String} token token值*/function getToken() { // 返回一个Promise对象 return new Promise((resolve, reject) => { wx.login({ success: function(res) { if (res.code) { let data = { code: res.code }; fetch(data).then((res) => { const { token } = res; // 把token放在storage中 wx.setStorageSync(“token”, token); // 输出token resolve(token); }); }else{ console.log(‘code error’); } }, fail: function(err) { console.log(‘登录失败!’ + err.errMsg); } }) })}将这些函数放在一个文件中,并将 fetch 函数和 fetchWithToken 函数输出,就能在页面中调用封装好的请求函数,简化开发过程。 原文https://www.kapeter.com/post/63
微信小程序封装API请求函数的实践
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序封装API请求函数的实践
相关推荐
数据恢复软件(二):用C++重写恢复B乐都县E企盈小程序MP位图文件的小程序
公众号再次改版高坪区E企盈小程序小程序又多了一个入口
微信小程序加载图片时,湘桥区E企盈小程序先拉长,再恢复正常
转:(很有用)有多个按钮,点击一个变色,点击另吴中区E企盈小程序一个变色,原来的恢复颜色的方法
第12课微信小程序Component构造器自道里区E企盈小程序定义组件:
导航中的南海区E企盈小程序小竖线总结
小程序:after实现德格县E企盈小程序1px纵向分割线
汉沽区E企盈小程序企业微信内测朋友圈和客户群功能:小程序C位出道!
小程序运行加载密山市E企盈小程序机制
小程通城县E企盈小程序序中间有字的分隔线
公众号和小程序可以同名了名称支持同主体复盘锦E企盈小程序用
微信小程序修改主潜江市E企盈小程序体信息
最新评论
独特万商直播系统,直播系统技术开发公司
万商直播系统开发公司
优秀的团队,万商直播管理系统
不错的小程序案例
优秀的团队,不错的服务!
讲的很好
主播长的帅气
好系统好服务