小程序里使用es7的async await语法

简介: 小程序里使用es7的async await语法

我们做小程序开发时,有时候想让自己代码变得整洁,异步操作时避免回调地狱.我们会使用es6的promise. es7的async,await .

promise在小程序和云开发的云函数里都可以使用. async和await只能在云开发的云函数里使用.我们在小程序的代码里直接使用,就会报如下错误.

这个报错就是告诉我们不能在小程序里直接使用es7的async和await语法.但是这么好的语法我们用起来确实显得代码整洁,逼格高.

那接下来我就教大家如何在小程序代码里使用es7的async和await语法.


一,下载facebook出的runtime.js类库



其实这个问题,一些大厂已经给出了解决方案.如上图,我们只需要把facebook出的这个runtime.js类库下载下来,然后放到我们的小程序项目里.

下载链接:https://github.com/facebook/regenerator/blob/master/packages/regenerator-runtime/runtime.js

github有时候下载比较慢,我也提前把这个类库下载好放我网盘里了.

下载链接:https://pan.baidu.com/s/19n5wmjIKK3PAPbcXBzWmQA 提取码:xxll


二,下载后,把runtime.js放到我们项目里


我这里把runtime.js放到我的utils目录下,如果你没有utils目录,可以新建.



三,代码里引入runtime.js类库


这里建议大家用 require语法引入.



这里需要注意的是.上图我们引入runtime.js时的变量名regeneratorRuntime必须和我这里一模一样.要不然就会引入不成功.


引入完后,在编译代码,可以看到控制台不再报我们一开始的错误

9ee5c543635e4b7d875c28d337647fc4.jpg


四,简单使用async和await


首先要知道我们async和await是结合使用的.



上图是我简单写的一个定时器来模拟异步等待.只要我们这里成功的引入runtime.js类库,后面想使用async和await就方便很多了.

相关文章
|
1月前
|
小程序
微信小程序无法使用async await的问题
微信小程序无法使用async await的问题
77 0
|
1月前
|
小程序 JavaScript
【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap & input (十)
【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap & input (十)
|
1月前
|
小程序 容器
【微信小程序】-- WXML 模板语法 - 条件渲染 -- wx:if & hidden (十一)
【微信小程序】-- WXML 模板语法 - 条件渲染 -- wx:if & hidden (十一)
|
1月前
|
小程序 JavaScript
【微信小程序】-- WXML 模板语法 - 数据绑定(九)
【微信小程序】-- WXML 模板语法 - 数据绑定(九)
|
3月前
|
移动开发 小程序 JavaScript
Uniapp 中,能够同时兼容H5、web、app、微信小程序的引入高德地图的语法格式
Uniapp 中,能够同时兼容H5、web、app、微信小程序的引入高德地图的语法格式
|
1月前
|
JSON 小程序 搜索推荐
【微信小程序】-- 模板语法与配置的总结(二十一)
【微信小程序】-- 模板语法与配置的总结(二十一)
|
1月前
|
小程序 JavaScript 索引
【微信小程序】-- WXML 模板语法 - 列表渲染 -- wx:for & wx:key(十二)
【微信小程序】-- WXML 模板语法 - 列表渲染 -- wx:for & wx:key(十二)
|
4月前
|
JSON 小程序 前端开发
【微信小程序】WXML的模板语法与WXSS模板样式(二)
【微信小程序】WXML的模板语法与WXSS模板样式
59 0
|
4月前
|
小程序 JavaScript 容器
【微信小程序】WXML的模板语法与WXSS模板样式(一)
【微信小程序】WXML的模板语法与WXSS模板样式
36 0
|
6月前
|
小程序 前端开发 JavaScript
小程序框架语法详解以及页面生命周期的代码预演
小程序框架语法详解以及页面生命周期的代码预演
54 0