用Promise實現小程式介面鏈式呼叫

xxxsimons發表於2018-10-06
Promise

一、前言

作者平時使用mpvue開發小程式，所以下面講到的方法都是基於mpvue而言的，當然本質上原生小程式語法同樣適用。原文連結：用Promise實現小程式介面鏈式呼叫

大家都知道，小程式的介面都是採用回撥的方式，這樣如果程式碼邏輯複雜了，將會導致程式碼難以閱讀。今天就通過ES6的Promise函式，來稍微改造一下小程式介面，讓我們的程式碼實現鏈式呼叫，便於閱讀。

二、核心程式碼

在utils目錄下新建檔案WXP.js（WX Promise）,程式碼內容如下：

// 程式碼核心，利用到了ES6的Promise函式
function p (func, obj) {
  return new Promise((resolve, reject) => {
    func({
      ...obj,
      success: resolve,
      fail: reject
    })
  })
}

// 此處匯出你在開發中需要用到的小程式介面
export default {
  login: obj => p(wx.login, obj),
  showLoading: obj => p(wx.showLoading, obj),
}

程式碼原理很簡單，主要就是在程式碼回撥的地方，分別呼叫resolve和reject函式，分別對應著success和fail回撥

三、在頂層main.js下全域性配置WXP.js

// main.js
import Vue from `vue`
import App from `./App`
import WXP from `./utils/wxp`

Vue.config.productionTip = false
App.mpType = `app`

Vue.prototype.WXP = WXP

const app = new Vue(App)
app.$mount()

這麼做主要是全域性配置之後，就不需要每個檔案裡面都匯入WXP.js檔案，便於使用。

四、使用

改造前的回撥方式：

wx.showLoading({
  title:`測試`,
  success:function(){
    wx.login({
      success:function(res){
        console.log(res.code)
      },
      fail:function(err){console.error(err)}
    })
  },
  fail:function(err){
    console.error(err)
  }
})

改造後的鏈式呼叫方式

this.WXP.showLoading({title:`測試`})
  .then(res=>{
    return this.WXP.login()
  })
  .then(res=>{
        console.log(res.code)
  })
  .catch(err=>console.error(err))

可以看出來，當回撥的方式層次不深的時候還是便於閱讀的，但是非同步操作多了，層次就會多，這樣程式碼就會變得難以閱讀。而改造後的鏈式呼叫方式，不管你層次有多少，都是一條鏈一樣，一步一步的，思路清晰，易於閱讀。不得不說，Promise大法好哈哈哈哈哈哈哈哈哈

參考連線：
小程式API
大白話講解Promise
阮大佬的Promise

相關文章