微信小程序中promise的使用

时间：2024-01-31 09:41:12

简介

相信看到这篇文章的同学，都已经对微信小程序的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进行了包裹，我个人觉得应该还有更好的方法，只是我暂时也不知道还应该采用什么方式可以更好的书写，如果有人有好的方法，欢迎留下评论或者截图，谢谢。

 

相关文章