简介

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

微信小程序中promise的使用的更多相关文章

  1. 在微信小程序中使用富文本转化插件wxParse

    在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...

  2. 微信小程序中同步 异步的使用

    https://www.jianshu.com/p/e92c7495da76   微信小程序中使用Promise进行异步流程处理 https://www.cnblogs.com/cckui/p/102 ...

  3. 微信小程序中使用Async-await方法异步请求变为同步请求

    微信小程序中有些 Api 是异步的,无法直接进行同步处理.例如:wx.request.wx.showToast.wx.showLoading等.如果需要同步处理,可以使用如下方法: 注意: Async ...

  4. 在微信小程序中使用redux

    本文主要讲述,在微信小程序中如何使用redux DEMO 需要解决的问题 如何在小程序中引入redux状态管理库,及它相关的插件? 微信小程序没有清晰的异步api,便于thunkMiddleware处 ...

  5. WeChat-SmallProgram:微信小程序中使用Async-await方法异步请求变为同步请求

    微信小程序中有些 Api 是异步的,无法直接进行同步处理.例如:wx.request.wx.showToast.wx.showLoading 等.如果需要同步处理,可以使用如下方法: 提示:Async ...

  6. 网页或微信小程序中使元素占满整个屏幕高度

    在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情 ...

  7. 微信小程序中发送模版消息注意事项

    在微信小程序中发送模版消息 参考微信公众平台Api文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/notice.html#模版消息管理 此参考地址 ...

  8. 微信小程序中placeholder的样式

    通常,现代浏览器大多支持::placeholder选择器,用于设置placeholder的样式,但是在微信小程序中并不支持这种方式,而是提供了一个专门的属性(placeholder-class)来处理 ...

  9. 微信小程序中转义字符的处理

    在微信小程序开发过程中,有时候会用到常用的一些特殊字符如:‘<’.‘>’.‘&’.‘空格’等,微信小程序同样支持对转义字符的处理,下面提供两种方法用来处理微信小程序中转义字符的处理 ...

随机推荐

  1. two pointers思想 ---- 利用两个i, j两个下标,同时对序列进行扫描,以O(n)复杂度解决问题的一种思想

    two pointers思想 ---- 利用两个i, j两个下标,同时对序列进行扫描,以O(n)复杂度解决问题的一种思想, 如果能用这种思想解决问题,那么会大大降低程序的复杂度. 两个利用这个思想的例 ...

  2. Jquery插件 之 zTree树加载

    原文链接:https://blog.csdn.net/jiaqu2177/article/details/80626730 zTree树加载 zTree 是一个依靠 jQuery 实现的多功能 “树插 ...

  3. jQuery 抖动特效函数封装

    <style> ul{ margin-top: 100px; } li { float: left; margin-left: 20px; position: absolute; top: ...

  4. Json.Net的介绍与简单实用(兼容2.0/3.0/3.5/4.5/RT)

    本文的前提是你已经熟悉Json,如果您还不知道什么是Json是什么,请自行查看维基百科. 一.Json.Net是什么? Json.Net是一个读写Json效率比较高的.Net框架.Json.Net 使 ...

  5. Java + Selenium 无头浏览器模式

    我们说的无头模式,只是在爬虫执行的时候,不再弹出浏览器的界面,只是使用浏览器的内核进行爬取,下面是示例代码: //设置本地chromedriver地址 System.setProperty(" ...

  6. 找到所有的txt文件并删除

    1.find /oldboy/ -type f -name "*.txt" -delete 2.find /oldboy/ -type f -name "*.txt&qu ...

  7. Spark 中 GroupByKey 相对于 combineByKey, reduceByKey, foldByKey 的优缺点

    避免使用GroupByKey 我们看一下两种计算word counts 的方法,一个使用reduceByKey,另一个使用 groupByKey: val words = Array("on ...

  8. 1167E - Range Deleting 双指针

    题意:给出n个数的序列,并给出x,这n个数的范围为[1,x],f(L,R)表示删除序列中取值为[l,r]的数,问有几对L,R使得操作后的序列为非递减序列 思路:若[l,r]成立,那么[l,r+1],. ...

  9. windows系统安装 ionic

    windows系统安装 ionic 参考菜鸟教程:https://www.runoob.com/ionic/ionic-install.html 命令行安装 Window 和 Linux 上打开命令行 ...

  10. zabbix4.2配置邮件+脚本报警:以QQ邮箱为例

    一.邮箱配置:开启smtp服务和授权 开启smtp选项后,系统会生成一个授权,你需要记住这个授权码,后面需要写入配置文件. 二.配置管理mailx: (1)安装mailx:[root@zabbix-s ...