评论

将小程序原生异步函数promisify后,在async/await中使用

将小程序原生的异步函数同步化。最近更新:原生的函数已经大部分同时原生支持同步化了,不需要本方案转化了。

目前,小程序中支持使用async/await有三种模式:

1、不勾选es6转es5,不勾选增强编译;该模式是纯es7的async/await,需要基础库高版本。

2、勾选es6转es5,勾选增强编译;一般是因为调用了第三方的es5插件,通过增强编译支持async/await。

3、勾选es6转es5,不勾选增强编译;手工引入runtime.js支持async/await。

据最近更新情况,原生的函数已经大部分同时原生支持同步化了,不需要本方案转化了,直接加上await即可;比如wx.chooseImage、wx.showModal。。。具体有哪些,可以自己试。

如果只是wx.request的同步化,可参考:

https://developers.weixin.qq.com/community/develop/article/doc/0004cc839407a069f77a416c056813



app.js代码:

function promisify(api) {
  return (opt, ...arg) => {
    return new Promise((resolve, reject) => {
      api(Object.assign({}, opt, { success: resolve, fail: reject }), ...arg)
    })
  }
}
App({
  globalData: {},
  chooseImage: promisify(wx.chooseImage),
  request: promisify(wx.request),
  getUserInfo: promisify(wx.getUserInfo),
  onLaunch: function () {
  },
})


某page的index.js代码:

const app = getApp()
testAsync: async  function(){
  let res = await app.chooseImage()
  console.log(res)
  res = await app.request({url:'url',method:'POST',data:{x:0,y:1}})
  console.log(res)
},

最后一次编辑于  2020-10-20  
点赞 18
收藏
评论

14 个评论

  • momo
    momo
    2020-12-16

    果然课博(刻薄) 还收费

    2020-12-16
    赞同 3
    回复 1
    • 老张
      老张
      2020-12-16
      请尊重一下别人的劳动成果。没有强迫你付费,不想要就飘过。想白嫖还骂人。
      2020-12-16
      1
      回复
  • 刘晨
    刘晨
    2020-06-07
    onCloudCheck:async function (){   
        let cloudOpenId = await this.onGetCloudOpenid();  
        console.log('   [cloudOpenId]',cloudOpenId)  
    },
    
    onGetCloudOpenid:function() {
        var getCloudOpenId
        wx.cloud.callFunction({
        name'login'data: {},
          successres => {
            getCloudOpenId = res.result.event.userInfo.openId
            return getCloudOpenId
          }, failerr => { }
        })
        return getCloudOpenId
      },
    

    用了第二种方法为什么还是异步……

    2020-06-07
    赞同
    回复 4
  • 陈由梅
    陈由梅
    2020-04-29

    兄弟,这段代码我有两个小小的疑惑。api是传入promise的函数,它的四个参数是哪来的?另外,第一层return有什么用啊?我看了半天的promise,copy你的代码能成功实现同步,但是原理不太懂,能麻烦你讲解一下嘛?

    2020-04-29
    赞同
    回复 4
    • 老张
      老张
      2020-04-29
      讲解不了,不是一句话的事,你去百度一下js的promise,学习一下。
      2020-04-29
      回复
    • 陈由梅
      陈由梅
      2020-04-29回复老张
      我问过同学了,我疑惑的地方是你使用了函数柯里化的地方。
      2020-04-29
      回复
    • 陈由梅
      陈由梅
      2020-04-29回复老张
      多谢
      2020-04-29
      回复
    • 清蒸鱼
      清蒸鱼
      2020-06-04
      我也只用过promise,看这段非常懵
      2020-06-04
      回复
  • 老张
    老张
    2020-04-01

    补充:第三种模式的用法:

    https://developers.weixin.qq.com/community/develop/doc/000cca349c400084c5e77058c5b404

    2020-04-01
    赞同
    回复
  • 佳明
    佳明
    2020-03-17

    看代码,好像是只返回了请求成功的参数,如果请求失败会怎样?返回空吗

    2020-03-17
    赞同
    回复 2
    • 老张
      老张
      2020-03-17
      这事也要说吗?try了解一下。
      2020-03-17
      回复
    • bug
      bug
      2021-12-07
      突然感觉到了java
      2021-12-07
      回复
  • 大橘为重
    大橘为重
    2020-02-18

    想问下 取消 es6转es5 ,为啥控制台报错:module "app.js" is not defined?

    2020-02-18
    赞同
    回复 1
    • 老张
      老张
      2020-02-19
      和本文没啥关系,你需要自查你的代码。实在不行,新建一个项目从最干净开始调试。
      2020-02-19
      回复
  • XCXer
    XCXer
    2019-12-23
    //小程序端的async/await的两类函数:callback和promise/then
    //请指教
    func1: async function(){
         //小程序端的async/await的两类函数:callback和promise/then
         lca = await func11();
         lca = await func12();
         function func11(){
           // callback
           return new Promise((resolve, reject)=>{
            wx.getLocation({type: 'wgs84',success:res=>{resolve(res)}})
           })
         }
         function func12(){
           // then(promise)
          db1.collection('col1').aggregate()
            .project({name: true})
            .end()
            .then(res =>{return res})
         }
    }
    
    2019-12-23
    赞同
    回复 3
    • 老张
      老张
      2019-12-23
      都行。个人喜好。
      2019-12-23
      回复
    • night suns
      night suns
      2020-02-15
      这个要引入文件吗
      2020-02-15
      回复
    • XCXer
      XCXer
      2020-02-18回复night suns
      "引入文件" 是指什么
      2020-02-18
      回复
  • Alex
    Alex
    2019-11-29

    不好意思 看了半天尝试还是没弄好,请问

    const db = await app.db.database();

    db.collection('business').

    这种应该怎么写,因为看到上面都是requst的

    2019-11-29
    赞同
    回复 5
    • 老张
      老张
      2019-11-29
      云开发是天生支持async/await的,可以直接使用。
      2019-11-29
      回复
    • 冰凌
      冰凌
      2020-02-19回复老张
      问下不是云开发需要引入其他文件吗?之前看有的说是需要引入es6-promise.js
      2020-02-19
      回复
    • 老张
      老张
      2020-02-19回复冰凌
      文章最后的三种模式,了解一下。
      2020-02-19
      回复
    • 冰凌
      冰凌
      2020-02-19回复老张
      好的,谢谢 之前没
      2020-02-19
      1
      回复
    • 老张
      老张
      2020-02-19回复冰凌
      有用记得点赞。
      2020-02-19
      回复
  • 25岁4k月薪300斤油腻死肥宅
    25岁4k月薪300斤油腻死肥宅
    2019-11-21

    不处理错误吗?

    2019-11-21
    赞同
    回复 1
    • 老张
      老张
      2019-11-21
      try想加随你,并不是都需要。
      2019-11-21
      回复
  • 姜龙
    姜龙
    2019-10-31

    跟开发工具版本有关系吗,我的报错,我的版本是RC v1.02.1910121

    2019-10-31
    赞同
    回复 4
    • 老张
      老张
      2019-10-31
      保密吗?错误原因?
      2019-10-31
      回复
    • 姜龙
      姜龙
      2019-10-31回复老张
      这是报错的原因的提示
      2019-10-31
      1
      回复
    • 老张
      老张
      2019-11-01回复姜龙
      抄代码都不会啊,async呢?
      2019-11-01
      回复
    • 姜龙
      姜龙
      2019-11-01回复老张
      不好意思,没看到
      2019-11-01
      回复

正在加载...

登录 后发表内容