解决小程序不能使用ES7语法async/await。并演示此语法

小汪又来了, 今天小汪来写一篇关于小程序使用 ES7语法中的 async和await,如果能帮到小伙伴,小伙伴不要忘了点点大拇指哦!
了解一下:es7的 async 号称是解决回调地狱的最终方案
使用的前准备:

  1. 在小程序的开发者工具中,勾选 es6转es5语法。
  2. 下载facebook的regenerator库中的regenerator/packages/regenerator-runtime/runtime.js (考虑到有些小伙伴开启GitHub网速过慢,点击这里这个超链接直接进入js页面进行复制即可)
    Ps 注意:1.因为小程序有说明 只支持ES6转ES5,如果不下载这个文件的话使用会报错哦!2.如果完成了这些配置也是会在某些机型,某些旧型号中出现问题,如果需要考虑机型兼容的问题只需再改成promise形式即可
    步骤图:1.进入facebook的regenerator库点击Raw进入页面后的步骤图1步骤图:2.点击进入下一个页面或点击括号内的超链接将会跳转至这个页面 ,复制即可在这里插入图片描述
  3. 在小程序的目录下新建文件夹 lib/runtime/runtime.js ,将代码拷贝进去
  4. 在每一个需要使用async语法的页面js文件中,都使用入以下语法进行引入(不能全局引入)
import regeneratorRuntime from '../../lib/runtime/runtime';
只需要引入即可,无需使用。

展示代码如下(模拟异步):


import regeneratorRuntime from '../../lib/runtime/runtime';
Page({
  data: {
    msg:'未点击事件'
  },
  async handleViewClick(){
    try {
      const Toast = await this.showToast('调用弹窗成功');
      如果这个函数有返回值 Toast就是成功之后的回调的返回值  
      并且使用这个方法是同步的,如上面的未执行完毕,
      下方代码皆暂停执行,这里我模拟一次异步展示看看
      this.setData({
        msg:'已点击按钮调用弹窗'
      });
    } catch (err){
      console.log(err);
    }
  },
  showToast(title,icon){
    return new Promise((resolve,reject)=>{
      setTimeout(()=>{
        wx.showToast({
          title,
          icon: icon||'none',
          duration: 1500,
          mask: true,
          success: resolve,
          fail: reject,
          complete: () => {}
        });
      },1000)
    })
  }
})

展示效果如下:展示效果
同理 如果小伙伴将需要同步请求的代码写成这个形式,就能执行同步操作啦。如果想是调用失败的回调则将代码写进catch即可。对于有强迫症的伙伴使用这种方法美化嵌套是一种不错的选择哦!
如果有小伙伴在使用上有不懂的地方,欢迎下方评论留言,如果有大佬发现描述不对的地方也希望大佬花两分钟指出小汪的错误,小汪一定及时改正。谢谢!

发布了2 篇原创文章 · 获赞 7 · 访问量 184

猜你喜欢

转载自blog.csdn.net/weixin_46465090/article/details/104864315
今日推荐