微信小程序网络层封装的实现(promise, 登录锁)


Posted in Javascript onMay 08, 2019

一、对小程序的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("请求失败") 
 })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
jquery鼠标停止移动事件
Dec 21 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
Mar 08 Javascript
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
对VUE中的对象添加属性
Sep 18 Javascript
简单了解JavaScript中常见的反模式
Jun 21 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 #Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 #Javascript
vue中使用props传值的方法
May 08 #Javascript
vue权限问题的完美解决方案
May 08 #Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 #Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 #Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 #Javascript
You might like
PHP写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
WordPress中用于获取文章作者与分类信息的方法整理
2015/12/17 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
php实现头像上传预览功能
2017/04/27 PHP
php防止表单重复提交实例讲解
2019/02/11 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
一个JQuery操作Table的代码分享
2012/03/30 Javascript
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
2015/05/25 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
2016/05/25 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
讲解vue-router之什么是动态路由
2018/05/28 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
详解原生JS动态添加和删除类
2019/03/26 Javascript
js简单遍历获取对象中的属性值的方法示例
2019/06/19 Javascript
Pyramid添加Middleware的方法实例
2013/11/27 Python
Python设计模式之观察者模式实例
2014/04/26 Python
Python使用sorted排序的方法小结
2017/07/28 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
Python爬虫实战:分析《战狼2》豆瓣影评
2018/03/26 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
python数据归一化及三种方法详解
2019/08/06 Python
Python自动登录QQ的实现示例
2020/08/28 Python
策划主管的工作职责
2013/11/24 职场文书
营销总经理岗位职责
2014/02/02 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
长城导游词300字
2015/01/30 职场文书
品质保证书格式
2015/02/28 职场文书
撤诉书怎么写
2015/05/19 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL