微信小程序请求封装技巧,告别回调地狱
发布时间:10-31来源:微信小程序工具|微信小程序开发|微信小程序制作平台-龙图应用【XcxIP.com】
写小程序的人,十有八九都被request坑过。不是接口突然超时,就是数据回来格式不对,更头疼的是,业务逻辑一复杂,请求套请求,回调嵌回调,代码丑得自己都不想看第二眼。我在社群里见过不少新手,一个页面里堆了七八个wx.request,每个里面又套着两三个setData,页面一加载,请求像放鞭炮一样噼里啪啦全发出去,服务器没炸,自己先看晕了。

其实问题不在wx.request本身,而在你从来没想过给它做一层封装。原生API就像一把裸螺丝刀,拧个螺丝没问题,但你要装修一套房子,总不能全程用一把螺丝刀吧。我见过最极端的案例,一个项目里同样的登录接口,被不同人写了五遍,参数校验、错误提示、loading状态,每个版本都不一样,联调的时候,后端小哥直接崩溃了。这哪是写代码,这是给后人埋雷。
封装的第一步,先把基础配置统一起来。baseURL肯定要抽出来,别每个请求都写一长串域名,哪天后端换个网关,你全局搜着改,改到怀疑人生。header里那些公共参数,比如token、版本号、设备信息,也统一塞进去。我习惯在封装函数里做个拦截,每次请求发出去之前,自动把storage里的token带上,后端要刷新token,我这边自动重试一次,用户完全无感知。这些东西看着琐碎,但攒在一起,就是你项目的底气。
接下来要解决的核心痛点,就是回调地狱。我见过有人用Promise一层层.then,看着比回调好点,但请求一多,链式调用照样长得像老太太的裹脚布。真正好用的方案,是把请求封装成async/await风格的函数。你写业务代码的时候,直接let res = await request('/api/user/list'),拿到的就是已经处理好的数据对象。错误处理也不用每个地方都try-catch,封装里统一catch,弹个toast,打条日志,业务代码干干净净。
这里有个细节很多人忽略,就是请求拦截和响应拦截一定要分开。请求拦截负责加参数、处理签名,响应拦截负责解包、判断业务状态码。我见过有人把这两件事混在一起写,结果报错的时候,你根本分不清是网络层挂了,还是业务层拒绝了。分开了之后,调试起来思路清晰得多,后端说“我返回了code=0”,你一眼就能在响应拦截器里看到是怎么处理的。
还有一个实战中特别有用的封装思路,是给请求加缓存和防重。比如一个商品列表,用户疯狂下拉刷新,你要是不做防重,同一秒内可能发出去十几个一模一样的请求。封装里维护一个pendingMap,相同url和参数的请求,如果还没返回,就直接复用那个Promise,不重复发。缓存也是,有些数据十分钟内不会变,你可以存到内存里,下次直接读缓存,省流量又提速度,用户滑起来明显感觉顺畅。
再进阶一点,就是请求的队列化处理。有些场景下,比如用户登录之后要拉取一堆初始化数据,接口之间有依赖关系,但你又不想写成一长串嵌套。封装里可以支持数组形式的请求列表,按顺序一个一个发,全部完成再执行回调。这个在页面初始化的时候尤其好用,三个接口,第二个依赖第一个的返回值,第三个又依赖第二个,你只要在配置里声明一下依赖关系,封装层自动帮你排队,业务代码就一行。
也是我最想强调的,封装一定要留后门。别把API封得太死,你得允许业务方临时自定义header、自定义超时时间、甚至绕过拦截器直接拿原始数据。我见过有的团队封装得过于“完美”,结果遇到一个特殊的上传接口,怎么配都不对,只能临时写原生request,丑得不行。好的封装,是80%的场景你闭着眼睛用,剩下20%的场景,你能打开盖子手动调整,而不是把API焊死。
回头看看,微信小程序的request封装,本质上是给业务代码减负。你花一下午把封装写好,后面几个月的开发效率都能翻倍。那些天天喊“回调地狱”的人,多半是没迈出第一步。别再裸调wx.request了,从今天起,给你的请求加个壳,你会发现,写业务逻辑原来也可以这么清爽。
