微信请求封装 wxRequest

一、主要功能

  1. 自动清理垃圾请求:假设小程序有A B C三个页面,每个页面都会发起请求。从 C 页面 navigateBack 或者用户手动往回滑动切换到 B 页面时,会自动终止 C 页面还未完成的请求从而释放资源。从 C 页面 switchTab 到 A 页面时会自动终止B C页面还未完成的请求。其原理是将发起的请求和页面绑定起来,再监听页面的 onUnload 卸载事件,页面卸载时将其还未请求完成的请求终止掉,也可以通过参数配置请求不和页面绑定。

  2. 请求改为 promise 形式:将原生小程序的请求方式,封装成 promise 方式。

  3. 限制请求并发数量:小程序限制请求并发数量为10,超过会报错。本代码将请求队列化,可以配置并发数量。

  4. token 过期时自动重新登录:可以配置接口返回某种情况时自动重新登录。重新登录后之前的请求会自动重新发送,这个过程用户无感知,体验更好。

  5. 增加重试功能:小程序的 request api 偶发性会出现错误,移动端的网络状态也没有 PC 端稳定,因为设备可能在移动,最好是增加重试。有一种复现方法是写一个响应比较慢的接口,然后在请求的时候频繁的将手机的网络从 wifi 状态切换到 4g,就是在请求接口时一直重复打开和关闭 wifi 的开关。这样接口也不会每次都响应成功。另外还有可能出现社区中帖子里的这些情况,本代码可以配置接口的重试次数。社区中发现的request问题。

  6. 取消请求:可以取消普通请求和上传下载请求

  7. 可以配置接口是否是需要鉴权的:需要鉴权的话就算没有主动调用登录接口也会提前调用登录接口再请求。就算并发请求多个需要鉴权的接口,程序也只会自动执行一次登录接口,这样就不用担心重复登录的问题。假设有2个 tabBar 页面A B,A是首页,在 A 页面中有登录逻辑,用户还未等到登录完毕就切换到 B 页面,不做处理的话 B 页面发起的需要鉴权的请求会失败

  8. 兼容uni-app

二、使用方式(可以运行代码参考)

  1. 在 app.js 中导入 mixin.js(一定要在app.js中导入)。
  2. uni-app需要导入uniapp-demo中api目录下的mixin.js(一定要在main.js中导入)。
  3. 导入 wxRequest.js
  4. 初始化 wxRequest ,参数如下,无默认值的都是必填项

baseUrl

  • 类型:String
  • 默认值:无
  • 用法:接口的前缀

loginUrl

  • 类型:String
  • 默认值:无
  • 用法:表示登录接口是 baseUrl + loginUrl 两个字符串的拼接
  • 例子:baseUrl 是 http://127.0.0.1:3001/ loginUrl 是 login。那么表示登录接口是http://127.0.0.1:3001/login

resolveData

  • 类型:function
  • 默认值:无
  • 用法:一个有返回值的方法,响应拦截器,即调用方then获取到的数据
  • 例子: 假如接口返回值为{"code":0,"data":{"message":"hello world/version?id=a0"}}前端只想要data中的数据,那么就像下面这样设置即可
function(data) {
    return data.data // 响应拦截器,即then获取的数据
}

getToken

  • 类型:function
  • 默认值:无
  • 用法:一个有返回值的方法,告诉代码怎么获取登录接口返回后的token
  • 例子:假如登录接口的返回值为{"code":0,"data":{"access_token":"001"}} 想要获取token就这样设置
function(data) {
    return data.data.access_token
}

reqSuccess

  • 类型:function
  • 默认值:无
  • 用法:需要返回true和false,告诉代码接口返回的值在什么样的情况下是成功的
  • 例子:假如说接口返回的code必须是0且有data值的情况下才算成功,那么就这样设置
function(data) {
    if (data && data.code === 0 && data.data) {
        return true
    }
    return false
}

reacquire

  • 类型:function
  • 默认值:无
  • 用法:需要返回true和false,告诉代码什么样的情况下需要重新登录了
  • 例子:假如说code是401或者402就表示token过期需要重新登录了,那么就这样设置
function(data) {
    if (data && [401, 402].includes(data.code)) {
        return true
    }
    return false
}

authorization

  • 类型:String
  • 默认值:Authorization
  • 用法:传递给后端token时的key值,放在请求的header处

limit

  • 类型:Number
  • 默认值: 5
  • 用法:表示最多并发多少个请求,包括上传和下载一起算在里面

loginRetry

  • 类型:Number
  • 默认值:2
  • 用法:表示登录接口出现异常时重试的次数,如果是服务器出错了则不会重试(服务器出错指的是类似于500错误这种)

retry

  • 类型:Number
  • 默认值:2
  • 用法:表示登录接口外的接口出错时重试几次,如果是服务器出错了则不会重试(但是上传和下载没有实现重试而是直接报错,因为上传和下载比较少用到而且貌似很少出错)

  1. 初始化好 wxRequest 实例后就是调用他的 api

三、api

token

  • 类型:property
  • 用法:获取登录后的token

ajax

  • 类型:function
  • 用法:发起请求
  • 参数:
  1. data:对象类型,和小程序的request api中的data一样,是传给服务器的参数
  2. url:字符串类型,会在前面拼接baseUrl组成请求地址
  3. type:字符串类型,默认为 GET ,和小程序 api 中的 method 参数一致
  4. page: 字符串类型,表示这个请求关联哪一个页面,如果不填就是微信 api 的 getCurrentPages() 返回数组中的最后一个路由 path。如果不想接口和页面绑定在一块,可以随便填一个不是路由的值
  5. whiteList:boolean类型,true表示需要登录后才能访问,false表示不登录也可以访问

upload

  • 类型:function
  • 用法:上传文件
  • 参数:Object,有下面几个属性
  1. page:非必填的String类型,不填就是路由
  2. url:上传的地址
  3. filePath:文件的本地地址
  4. name:上传文件的名字和小程序参数一致
  5. onProgressUpdate:非必填的Function,上传进度回调函数

download

  • 类型:function
  • 用法:下载文件
  • 参数:Object,有下面几个属性
  1. page:非必填的String类型,不填就是路由
  2. url:下载的地址
  3. onProgressUpdate:非必填的function,下载进度的回调函数

login

  • 类型:function
  • 用法:主动调用登录
  • 参数:无

cancelAllRequest

  • 类型:function
  • 用法:取消小程序所有的请求
  • 参数: 无

cancelRequest

  • 类型:function
  • 用法:取消某个请求
  • 参数:使用ajax返回的promise中的requestId(具体可以运行demo小程序,首页有取消按钮)

cancelPageRequest

  • 类型:function
  • 用法:取消某个页面的请求
  • 参数:字符串类型,可以是某个路由的path,也可以是开始调用ajax时传递的page参数

getErrMsg

  • 类型:function
  • 用法:提炼错误信息,用在catch中获取出错的信息
  • 参数:错误信息,可以是对象或者字符串,由于不能完全考虑到所有情况,所以需要根据实际业务做修改

四、测试

  1. 使用项目中提供的 node-server 中的代码,先 npm install 安装依赖,再使用 npm run dev 启动 node 服务器
  2. 如果要模拟重试的情况,直接不启动 node 服务器,这样登陆请求会重试
  3. 如果要模拟登陆鉴权失效的情况,就将 node-server 中 /version 接口的 code 改为 401
  4. 中途修改 node-server 代码会自动重启服务器。就可以随时修改接口的返回,可以测试小程序在运行过程中途遇到401的情况会不会重新登录。中途关闭服务器看看会不会重试。在重试过程中再启动服务器看看会不会重试成功

五、仓库地址

https://github.com/lijibing01/wxRequest.git

  • 欢迎star
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,186评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,858评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,620评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,888评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,009评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,149评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,204评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,956评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,385评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,698评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,863评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,544评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,185评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,899评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,141评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,684评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,750评论 2 351

推荐阅读更多精彩内容