微信小程序 - 使用Promise改写原生接口

830 阅读1分钟

在使用小程序的时候,发现一个问题:

如果进行多次异步操作,代码结构非常的不清晰,层层嵌套,给维护带来不变

wx.({ success: res=>{ wx.({ success:res=>{ wx.****({ success: res=>{ //do something } }) } }) },

fail: res=>{
 
}

}) 通过ES6 的Promise对象,我们可以将层层嵌套的异步操作,改为线性的展示形式,如下所示,对比上面的层层嵌套形式,逻辑上清晰很多

wxapi() .then(res=>{do something}) .then(res=>{do something}) .then(res=>{do something})

我们可以考虑将小程序原生的所有异步API接口,全都改成Promise形式,比较笨的方式是针对每个接口进行改写,比如改写wx.request

//utils/base.js

function newRequest({url, data }) { return new Promise((resole,reject)=>{ wx.request({ url: url, data:data, success:res=>resole(res), fail:res=>reject(res) }) }) }

module.exports={newRequest}

//某个页面的js,onload中

var promise=require("../../utils/base.js")

....

promise.newRequest({ url:'/api//', data:'' }) .then(res=>{ console.log(res) return promise.newRequest({ url:'/api//', data:'' }) }) .then(res=>{ ........ })

这样一个一个改写太笨了,我们可以观察到,小程序的API接口形式很统一都是这样的

wx.function_name(obj)

我们可以这么改写,传2个参数,一个是api的名字,一个是obj参数对象,通过...obj展开对象,success时调用ressole,fail时,调用reject

//utils/base.js function wxapi(function_name, obj) { return new Promise((resole, reject)=>{ wx[function_name]({ ...obj, success: res => resole(res), faile:res=>reject(res) }) }) }

module.exports = {wxapi}

//某个页面的js,onload中,以改写的wx.request为例

var wxapi=require("../../utils/base.js")

wxapi("request",{url:"",data:""}) .then(res=>console.log(res)) 这样就可以将所有的微信小程序异步API接口,改成支持Promise形式,从嵌套的代码结构,改成线性的代码结构,增强代码的可维护性。

转自 - shanhuxueyuan.com/news/detail…