微信小程序中promise的使用

簡介

相信看到這篇文章的同學，都已經對微信小程序的api文檔有所了解了，也都經歷了微信小程序api回調函數嵌套的痛苦，才會想要通過Promise解決回調地獄這個問題，我下面就直接介紹怎么在小程序中使用promise。

歷史問題

很多同學肯定看到一些介紹微信小程序中使用Promise的文章，告訴你說微信小程序不支持Promise,需要自己引入es6-promise,或者需要使用一些第三方的promise,就我看到的如bluebird等，老版本的微信小程序應該是不支持es6中的Promise的，但是2018年以后的微信小程序肯定是支持的，所以可以直接使用，不需要再引入第三方的Promise了。另外如果還不了解什么是Promise的話，建議自行查找相應的Promise介紹與使用方法。

使用說明

首先可以在util.js文件中定義函數wxPromisify，這個函數的作用就是把小程序api使用Promise進行包裹，從而使用時可以以Promise的優勢書寫代碼

 

/**
 * wxPromisify
 * @fn 傳入的函數，如wx.request、wx.download
 */

function wxPromisify(fn) {
  return function (obj = {}) {
    return new Promise((resolve, reject) => {
      obj.success = function (res) {
        resolve(res)
      }

      obj.fail = function (res) {
        reject(res)
      }

      fn(obj)//執行函數，obj為傳入函數的參數
    })
  }
}



module.exports = {
    wxPromisify: wxPromisify
}

 

下面介紹wxPromisify函數的使用

var Promisify = require('./utils.js')//具體引入路徑根據具體情況

var getSystemInfo = Promisify.wxPromisify(wx.getSystemInfo);//獲取系統信息
var getUserInfo = Promisify.wxPromisify(wx.getUserInfo);//獲取用戶信息
var downloadFile = Promisify.wxPromisify(wx.downloadFile);//預下載文件
var request = Promisify.wxPromisify(wx.request);//ajax請求

上面的代碼就是通過wxPromisify函數重新定義了小程序的api

在你需要使用Promise的js文件內或者直接在util.js中定義新構建的函數都是可以的

重新定義函數后的使用方法如下代碼所示

getUserInfo()
.then(res =>{
    console.log(res)    
})

request({
    url: 'https://xindongpeixun.com/auth/news/page',
    method: 'GET',
    header:{
        'content-type': 'json'
    }
}).then(res => {   
    console.log(res.data.data.records) 
    getUserInfo()
    .then(res =>{
        console.log(res)    
    })                    
})

上面一段代碼分別表現了兩種情況，一種是直接使用，另一種是函數嵌套的使用以及參數的傳遞。

 

小結

上面這種方法雖然看似使用了Promise，解決了回調地獄代碼復雜難以閱讀的問題，但是實際上只是簡單地對小程序的api進行了包裹，我個人覺得應該還有更好的方法，只是我暫時也不知道還應該采用什么方式可以更好的書寫，如果有人有好的方法，歡迎留下評論或者截圖，謝謝。