promise的基础内容可以看MDN或者阮一峰大大的博客
我看了MDN和博客之后，对promise一知半解，很多地方都搞不明白。
所以说一定要实践，技术这东西光在纸面是不行的。小程序正好在写一个登录逻辑，有很多异步和等待的过程，下面从实际场景出发来说一说promise。
看完了之后你可能会有一些新的理解。
我用了mpvue，中间涉及到了vuex
问题和需求
我设计的登录逻辑是：
- 查看userinfo是否有值，没有值需要赋值
- 然后查看info更新状态，如果未更新需要向服务器发送更新请求
- userinfo有值且info不用更新，直接调用登录接口
一点题外话
说明一下这个状态更新，状态更新接口有两个目的：
- 注册
- 更新用户信息
为什么不用一个专门的接口来接收用户第一次使用的注册信息呢？
小程序是没有直接接口获取用户的openid的，但是openid又是注册时候一个必须的参数。
小程序唯一拿到openid发方法就是登录的code。所以要注册必定先拿到登录code。
这种情况下专门搞一个注册接口我觉得意义不大，这个接口和登录接口的区别仅仅是上传了用户信息。但是你用户信息总是需要一个接口来接收更新的吧，干脆合并在一起得了。
继续说
这个逻辑非常简单，但是我下午搞了两个小时都没搞完，问题出在小程序接口大量的异步调用上。
我用伪码描述一下整个过程涉及到的异步调用
if (!userinfo) {
授权了吗({
success(res) {
if (!授权) {
授权()
}
获取userinfo({
success(res) {
存储更新()
}
})
}
}
}
if (!updated) {
更新请求()
} else {
登录()
}
// 登录我单独拿出来了 因为登录的方法后面做拦截还要用
登录() {
登录接口({
success() {}
}
}
看起来很好地实现了前面的逻辑，然而实际上，真这么简单怎么会由回调地狱呢。
这里的问题是，userinfo和logincode都是异步的，请求的时候还没有拿到值。
这里算是一个很经典的异步处理情景，以前倒是看了不少回调地狱，总是要自己遇上才会真正认识的。
应用promise
要处理这个问题，自然的思路就是等待回调完成，那么很自然地就会想到用promise。
我之前是没有自己写过promise来用的，有些问题比较蠢，大佬们直接跳过吧。
先说一点基础的内容
我以前一直没弄明白new promise的传入的函数和resolve、rejsect到底是个什么关系。我想很多初学者应该也和我一样没有捋清楚。
一个个来
executor
就是传入的这个function，MDN上这么说
Promise构造函数执行时立即调用executor 函数
也就是说，new了之后这个function就执行了
resolve/reject
这两是函数，调用了之后就会分别走向fulfilled和reject状态。这两个函数是要自己在promise逻辑中调用的，参数会传到then的回调中
用promise处理小程序回调
这位老哥给了一个我觉得不错的方法
https://segmentfault.com/a/1190000013150196#articleHeader3
function promisify (api) {
return (options, ...params) => {
return new Promise((resolve, reject) => {
api(Object.assign({}, options, { success: resolve, fail: reject }), ...params);
});
}
}
原理还是很简单的, 利用了刚刚说的resolve/reject函数的调用参数会传递then中对应的函数这个特性. 然后做了一些处理保证其他的值也能传进来.
使用这个封装之后, 小程序回调的传值就可以直接在then里面使用了
注意:
这个方法适用于有success回调的接口, 其他的没用也没必要用
为什么要返回一个函数而不直接返回promise对象
因为要接收其他的参数, 否则封装就是很拙劣的.
如果直接返回promise对象的话得这么写
function promisify_no_func(api, options, ...params) {
return new Promise((resolve, reject) => {
api(Object.assign({}, options, { success: resolve, fail: reject }), ...params);
});
}
对比一下调用的感觉
// 返回函数
var api = promisify(wx.api)
api({opt}, param)().then(res => console.log(res))
// 返回promise对象
promisify_no_func(wx.api, {opt}, param).then(res => console.log(res))
显然是前者更合适的
下一个问题
我想拿到promise返回的值怎么办???
我决定专门写一篇文章讲一讲
