【Promise】从小程序简单的登录逻辑说promise

promise的基础内容可以看MDN或者阮一峰大大的博客

我看了MDN和博客之后，对promise一知半解，很多地方都搞不明白。

所以说一定要实践，技术这东西光在纸面是不行的。小程序正好在写一个登录逻辑，有很多异步和等待的过程，下面从实际场景出发来说一说promise。

看完了之后你可能会有一些新的理解。

我用了mpvue，中间涉及到了vuex

问题和需求

我设计的登录逻辑是：

1. 查看userinfo是否有值，没有值需要赋值
2. 然后查看info更新状态，如果未更新需要向服务器发送更新请求
3. 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处理小程序回调

这位老哥给了一个我觉得不错的方法 segmentfault.com/a/119000001…

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))

复制代码

显然是前者更合适的