对微信API整体的promise封装 和 对promise写法的一些反思

对微信API整体的promise封装 和 对promise写法的一些反思

promise 一直号称是解决回调地狱的最好方法, 但是对于他我们应该怎么使用呢

之前在写小程序 写的非常的别扭:

new Promise((resolve, reject) => {
      wx.login({
        success (res) {
          console.log(res)
          const {code} = res
          resolve(code)
        },
        fail (err) {
          reject(err)
        }
      })
    })
      .then(code => {
        wx.$request('api/public/v1/users/wxlogin', {
          method: "post",
          data: {
            encryptedData,
            iv,
            rawData,
            signature,
            code
          }
        })
        .then((res) => {
          if (res.statusCode === 200) {
            return res
          }
        })
      })
      .then(res => {
        console.log(res)
        wx.setStorage({
          data: res.message.token,
          key: 'token',
        })
        wx.switchTab({
          url: '../cart/cart',
        })
      })
      .catch(err => {
        console.log(err)
      })
     

wx.$request 是自己封装的 promise 的请求函数
反正我感觉是非常别扭里面的promise 中 还套着 then ,结果在网上一看, 可以直接返回 promise 函数接到下一级

```javascript
new Promise((resolve, reject) => {
      wx.login({
        success (res) {
          console.log(res)
          const {code} = res
          resolve(code)
        },
        fail (err) {
          reject(err)
        }
      })
    })
      .then(code => {
        return wx.$request('api/public/v1/users/wxlogin', {
          method: "post",
          data: {
            encryptedData,
            iv,
            rawData,
            signature,
            code
          }
        })
      })
      .then(res => {
        console.log(res)
        wx.setStorage({
          data: res.message.token,
          key: 'token',
        })
        wx.switchTab({
          url: '../cart/cart',
        })
      })
      .catch(err => {
        console.log(err)
      })

然后就瞬间豁然开朗!

之前那个wx.login 是用promise包裹不是很好看
我尝试能否将所有的异步函数, 都封装成promise 形式

在 app.js 中写入以下的代码

wx.$promise = (name, option) => {
  return new Promise((reslove, reject) => {
    wx[name]({
      ...option,
      success (res) {
        reslove(res)
      },
      fail (err) {
        reject(err)
      }
    })
  })
}

上面的代码就可以改成如下的形式:

wx.$promise('login')
      .then(res => {
        return wx.$request('api/public/v1/users/wxlogin', {
          method: "post",
          data: {
            encryptedData,
            iv,
            rawData,
            signature,
            code
          }
        })
      })
      .then(res => {
        if (res.statusCode === 200) {
          wx.setStorage({
          data: res.message.token,
          key: 'token',
        })
        wx.switchTab({
          url: '../cart/cart',
        })
        }
      })
      .catch(err => {

      })

看起来还是挺舒服的,就这样!