摘要:需要判断服务器的用这一段我司服务器返回表示真正的成功,其他表示各种错误码如何使用将上面的代码写到一个独立的文件里,我的命名为。
一、对小程序的request的封装
写过小程序的应该知道,微信的request不封装基本上不能用,写的显的太冗长,而且是回调式的,回调地狱什么的就不说了,可读性差。 下面是我的封装代码,顺便支持一下promise。
function baseRequest({ url, method, header, data, complete }, resolve, reject) { wx.request({ url, method, header, data, success: function (res) { // 需要判断服务器code的用这一段 // 我司服务器返回0表示真正的成功,其他code表示各种错误码 // if (res.data.code === 0) { // resolve(res) // } else { // reject(res) // } resolve(res) }, fail: function (res) { reject(res) }, complete: function (res) { complete(res) } }) } function requestPromise( options ) { let req = new Promise((resolve, reject) => { baseRequest(options, resolve, reject) }) return req } function get(options) { options.method = "GET" return requestPromise(options) } function post(options) { options.method = "POST" if (!options.header) { options.header = {} } options.header["Content-Type"] = "application/x-www-form-urlencoded" return requestPromise(options) } function put(options) { options.method = "PUT" if (!options.header) { options.header = {} } options.header["Content-Type"] = "application/x-www-form-urlencoded" return requestPromise(options) } module.exports = { get, post, put }
如何使用: 1. 将上面的代码写到一个独立的文件里,我的命名为network.js。 2. 然后将其绑定到全局的 wx 对象身上。 wx.Network = require("./network.js")。(在app.js里面绑定) 3. 实例如下
wx.Network.get({ url: "xxx.xxx.xxx", // 请求路径 data: { a: "a" // 参数列表 } }).then(res => { console.log("请求成功") }).catch(res => { console.log("请求失败") })二、登录锁
基本的request请求封装完了后,还有一些特殊的需求,比如 1. 在首页我会进行登录, 登录后获得token, 然后我拿着token去请求其他需要token才可以请求的接口 (比如个人购物信息) 2. 这个时候一种做法是登录完成前不进行需要token的请求,并且有蒙板进行拦截操作(正在登录ing...) 3. 对于我公来说这种方法有一个致命的弊端,就是在高并发的情况下,服务器的压力很大,首页的登录接口很慢才有返回(进首页即自动登录),这个时候,用户看到的界面就是loading,而且可能时间比较长,如果用户对你的产品粘性不高,绝大部分人直接就走了 4. 为了优化这种情况下的用户体验,我们全面取消了登录的loading,替换成了“登录锁”的形式 5. 效果为未登录调用需要token的接口时,不请求,直到登录完成后才会请求 6. 即如果这个请求需要token,那么先判断有没有登录,如果没有登录,启动定时器一段时间后(200ms),再次判断,如果已经登录,发出请求,如果没有,重复以上操作 加了登录锁后的代码如下: ( 添加了新的 wait 函数,调用get,post,put时增加第二个参数,表示是否需要token )
function baseRequest({ url, method, header, data, complete }, resolve, reject) { wx.request({ url, method, header, data, success: function (res) { // 需要判断服务器code的用这一段 // 我司服务器返回0表示真正的成功,其他code表示各种错误码 // if (res.data.code === 0) { // resolve(res) // } else { // reject(res) // } resolve(res) }, fail: function (res) { reject(res) }, complete: function (res) { complete(res) } }) } function wait(options, needToken, resolve, reject) { if (needToken) { var token = wx.getStorageSync("token") if (!token) { setTimeout(() => { wait.apply(null, arguments) }, 200) } else { if (!options.header) { options.header = {} } options.header["token"] = token baseRequest(options, resolve, reject) } } else { baseRequest(options, resolve, reject) } } function requestPromise( options, needToken = true ) { let req = new Promise((resolve, reject) => { wait(options, needToken, resolve, reject) }) return req } function get(options, needToken) { options.method = "GET" return requestPromise(options, needToken) } function post(options, needToken) { options.method = "POST" if (!options.header) { options.header = {} } options.header["Content-Type"] = "application/x-www-form-urlencoded" return requestPromise(options, needToken) } function put(options, needToken) { options.method = "PUT" if (!options.header) { options.header = {} } options.header["Content-Type"] = "application/x-www-form-urlencoded" return requestPromise(options, needToken) } module.exports = { get, post, put }
如何使用:(使用方式和上面一样,只是调用的时候多一个参数) 1. 将上面的代码写到一个独立的文件里,我的命名为network.js。 2. 然后将其绑定到全局的 wx 对象身上。 wx.Network = require("./network.js")。(在app.js里面绑定) 3. 实例如下
wx.Network.get({ url: "xxx.xxx.xxx", // 请求路径 data: { a: "a" // 参数列表 } }, true // 增加第二个参数,true表示需要token, false表示不需要 ).then(res => { console.log("请求成功") }).catch(res => { console.log("请求失败") })
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/104216.html
摘要:中国互联网络信息中心发布的中国互联网络发展状况统计报告显示,截至年月,我国网民规模达亿人,微信月活亿支付宝月活亿百度月活亿另一方面,中国手机占智能手机整体的比例超过,月活约亿。在年末正式发布了面向未来的跨端的。 开源中国专访:Chameleon原理首发,其它跨多端统一框架都是假的? 原创: 嘉宾-张楠 开源中国 以往我们说某一功能跨多端,往往是指在诸如 PC、移动等不同类型的设备之...
摘要:背景之前小程序代码混乱,所以新项目一开始就准备弄个微信小程序的的封装流程先来说说整个流程里面已进入就去获取用户信息,如果没有登录则默认登录,这里不做错误处理用户必须同意授权才能进行操作,如果不同意授权则会一直跳转到授权页面在授权页面点击授权 背景 之前小程序代码混乱,所以新项目一开始就准备弄个微信小程序的 request 的封装 流程 先来说说整个流程: appjs 里面已进入就去获...
摘要:背景之前小程序代码混乱,所以新项目一开始就准备弄个微信小程序的的封装流程先来说说整个流程里面已进入就去获取用户信息,如果没有登录则默认登录,这里不做错误处理用户必须同意授权才能进行操作,如果不同意授权则会一直跳转到授权页面在授权页面点击授权 背景 之前小程序代码混乱,所以新项目一开始就准备弄个微信小程序的 request 的封装 流程 先来说说整个流程: appjs 里面已进入就去获...
摘要:背景之前小程序代码混乱,所以新项目一开始就准备弄个微信小程序的的封装流程先来说说整个流程里面已进入就去获取用户信息,如果没有登录则默认登录,这里不做错误处理用户必须同意授权才能进行操作,如果不同意授权则会一直跳转到授权页面在授权页面点击授权 背景 之前小程序代码混乱,所以新项目一开始就准备弄个微信小程序的 request 的封装 流程 先来说说整个流程: appjs 里面已进入就去获...
阅读 2206·2021-11-23 09:51
阅读 381·2019-08-30 13:59
阅读 1669·2019-08-29 11:20
阅读 2438·2019-08-26 13:41
阅读 3112·2019-08-26 12:16
阅读 613·2019-08-26 10:59
阅读 3153·2019-08-26 10:14
阅读 426·2019-08-23 17:21