脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 小程序网络层封装

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

 更新时间：2019年05月08日 11:33:51   作者：海洋饼干  
这篇文章主要介绍了微信小程序网络层封装（promise, 登录锁），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • js实现StringBuffer的简单实例

    js实现StringBuffer的简单实例

    下面小编就为大家带来一篇js实现StringBuffer的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • JavaScript asp.net 获取当前超链接中的文本

    JavaScript asp.net 获取当前超链接中的文本

    今天用到，不会。网上找到一个方法，赶快记下来。可以获取超链接的链接文本。
    2009-04-04
  • 原生js实现图片层叠轮播切换效果

    原生js实现图片层叠轮播切换效果

    这篇文章主要为大家详细介绍了原生js实现图片层叠轮播切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • js的window.showModalDialog及window.open用法实例分析

    js的window.showModalDialog及window.open用法实例分析

    这篇文章主要介绍了js的window.showModalDialog及window.open用法,实例分析了window.showModalDialog与window.open方法的定义、功能与使用技巧,需要的朋友可以参考下
    2015-01-01
  • JS 创建对象的模式实例小结

    JS 创建对象的模式实例小结

    这篇文章主要介绍了JS 创建对象的模式,结合实例形式总结分析了JS 创建对象的各种常用模式,包括工厂模式、构造函数模式、原型模式、组合构造和原型模式、动态原型模式、寄生构造函数模式、稳妥构造模式等,需要的朋友可以参考下
    2020-04-04
  • js重写方法的简单实现

    js重写方法的简单实现

    下面小编就为大家带来一篇js重写方法的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • js通过地址栏给action传值(中文乱码全是问号)

    js通过地址栏给action传值(中文乱码全是问号)

    我从js代码中通过地址栏传值给了action的相应变量，但是，如果变量值为中文的时候，在action中测试输出则为问号
    2013-05-05
  • 用JavaScript实现一个代码简洁、逻辑不复杂的多级树

    用JavaScript实现一个代码简洁、逻辑不复杂的多级树

    这篇文章主要介绍了用JavaScript实现一个代码简洁、逻辑不复杂的多级树,需要的朋友可以参考下
    2014-05-05
  • javascript实现判断鼠标的状态

    javascript实现判断鼠标的状态

    这篇文章主要介绍了javascript实现判断鼠标的状态的相关代码，十分简单实用，有需要的小伙伴可以参考下。
    2015-07-07
  • 浅谈Axios去除重复请求方案

    浅谈Axios去除重复请求方案

    本文主要介绍了Axios去除重复请求方案，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08

最新评论