微信小程序使用Promise简化回调

网友投稿 426 2023-02-19


微信小程序使用Promise简化回调

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。

所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。

了解什么是 Promise 对象

在项目中,会出现各种异步操作,如果一个异步操作的回调里还有异步操作,就会出现回调金字塔。

比如下面这种

// 模拟获取code,然后将code传给后台,成功后获取userinfo,再将userinfo传给后台

// 登录

wx.login({

success: res => {

let code = res.code

// 请求

imitationPost({

url: '/test/loginWithCode',

data: {

code

},

success: data => {

// 获取userInfo

wx.getUserInfo({

success: res => {

let userInfo = res.userInfo

// 请求

imitationPost({

url: '/test/saveUserInfo',

data: {

userInfo

},

success: datahttp:// => {

console.log(data)

},

fail: res => {

console.log(res)

}

})

},

fail: res => {

console.log(res)

}

})

},

fail: res => {

console.log(res)

}

})

},

fail: res => {

console.log(res)

}

})

下面分析如何用Promise来进行简化代码

因为微信小程序异步api都是success和fail的形式,所有有人封装了这样一个方法:

promisify.js

module.exports = (api) => {

return (options, ...params) => {

return new Promise((resolve, reject) => {

api(Object.assign({}, options, { success: resolve, fail: reject }), ...params);

});

}

}

先看最简单的:

// 获取系统信息

wx.getSystemInfo({

success: res => {

// success

console.log(res)

},

fail: res => {

}

})

使用上面的promisify.js简化后:

const promisify = require('./promisify')

const getSystemInfo = promisify(wx.getSystemInfo)

getSystemInfo().then(res=>{

// success

console.log(res)

}).catch(res=>{

})

getSystemInfo

可以看到简化后的回调里少了一个缩进,并且回调函数从9行减少到了6行。

回调金字塔的简化效果

那么再来看看最开始的那个回调金字塔

const promisify = require('./promisify')

const login = promisify(wx.login)

const getSystemInfo = promisify(wx.getSystemInfo)

// 登录

login().then(res => {

let code = res.code

// 请求

pImitationPost({

url: '/test/loginWithCode',

data: {

code

},

}).then(data => {

// 获取userInfo

getUserInfo().then(res => {

let userInfo = res.userInfo

// 请求

pImitationPost({

url: '/test/saveUserInfo',

data: {

userInfo

},

}).then(data => {

console.log(data)

}).catch(res => {

console.log(res)

})

}).catch(res => {

console.log(res)

})

}).catch(res => {

console.log(res)

})

}).catch(res => {

console.log(res)

})

简化回调

可以看到简化效果非常明显。

同样适用于网页或者nodejs等中。

参考

Promise 对象

源代码

tomfriwel/MyWechatAppDemo 的promisePage页面


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:解决npm安装Electron缓慢网络超时导致失败的问题
下一篇:Java并发之传统线程同步通信技术代码详解
相关文章

 发表评论

暂时没有评论,来抢沙发吧~