小程序里使用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必须和我这里一模一样.要不然就会引入不成功.

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

四,简单使用async和await

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

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

今天就讲到这里.想学习更多小程序相关的知识,请持续关注.下期见

原文地址：https://blog.51cto.com/14368928/2457499

时间： 2024-07-29 23:33:08

小程序里使用es7的async await语法的相关文章

ES7的Async/Await的简单理解

Async/Await 的个人见解 正文: async,顾名思义,一个异步执行的功能,而 await 则是配合 async 使用的另一个关键字,也是闻字识其意,就是叫你等待啦! 二者配合食用效果更佳哦,就像德芙配巧克力 ⊙_⊙|| 现在其实有点意识的前端或者JS学习者基本都学习了ES6语法了,但是依旧感觉在编写异步代码上不够爽怎么办,在 ES7 的 async/await 则能使得我们在编写异步代码时变得像同步一样的方式来编写,这样子可以帮助我们更直观的阅读我们的额代码而不必在一堆代码中去寻找这

体验异步的终极解决方案-ES7的Async/Await

阅读本文前,期待您对promise和ES6(ECMA2015)有所了解,会更容易理解.本文以体验为主,不会深入说明,结尾有详细的文章引用. 第一个例子 Async/Await应该是目前最简单的异步方案了,首先来看个例子. 这里我们要实现一个暂停功能,输入N毫秒,则停顿N毫秒后才继续往下执行. 1 var sleep = function (time) { 2 return new Promise(function (resolve, reject) { 3 setTimeout(function

微信小程序里各种文件是干什么的？

微信小程序首次进入 其他地方略过,这里讲一下,为什么要勾选"在当前目录中创建quick start项目",quick start项目相当于word文档中的模板,可以在模板的基础上直接修改. 创建好了以后,会看到这个 中间的部分的目录,就是微信小程序的工程结构重要的是图中的这些文件分别是干什么的? 这些文件可以分为四类,分别是以js.wxml.wxss和json结尾的文件.以js结尾的文件,一般情况下是负责功能的,比如,点击一个按钮,按钮就会变颜色. 以wxml为后缀的文件,一般情况下负

小程序里实现 watch 和 computed

小程序里的自定义组件里是有数据监听器的,可以监听对应数据的变化来执行callBack,但是页面Page里没有对应的api就显的很生硬,比如某个数据变了(如切换城市)需要重新刷页面,如果不做监听,每次都要在数据变化的地方手动去调一次函数. 那么如何像vue那样在Page里实现 watch 和 computed 呢 ?如果这时候你脑子里能想到 Obejct.defineProperty 或者 Proxy 那么接下来就慢慢实现吧. 先晒出是这样调用的,请牢记这个调用,后面会反复提到 test2 tes

小程序里input宽度与文字显示的问题

不知道是不是bug,微信小程序里input宽度缩小,input可输入文字的区域会缩小的更多,比如说你把input宽度设置为90%,则input文字输入可显示的区域可能只有80%左右. //(存在疑点=>)目前的解决方法:在input输入框外面套一层view,通过改变view的宽度控制input的长度,这样不会影响文字显示 注意 input框上 不能加display:flex 属性 原文地址:https://www.cnblogs.com/panghu123/p/12178187.html

微信小程序里解决app.js onLaunch事件与小程序页面的onLoad加载前后异常问题

使用 Promise 解决小程序页面因为需要app.js onLaunch 参数导致的请求失败 app.js onLaunch 的代码 1 "use strict"; 2 Object.defineProperty(exports, "__esModule", { 3 value: true 4 }); 5 const http = require('./utils/http.js'); 6 const api = require('./config.js'); 7

wepack打包时出错不压缩代码及使用es7（async await）新语法问题

1.打包时出错且不压缩代码是因为没有正确的转换语法 npm install babel-core babel-preset-env babel-loader --save-dev 2.如果使用了async await等es7新语法还要安装 npm install babel-plugin-transform-runtime --save-dev 3.webpack.config.js中配置 module:{ rules:[ { test:/(\.jsx|.js)$/, use:{ loader:

在微信小程序里自动获得当前手机所在的经纬度并转换成地址

效果:我在手机上打开微信小程序,自动显示出我当前所在的地理位置: 具体步骤: 1. 使用微信jssdk提供的getLocation API拿到经纬度: 2. 调用高德地图的api使用经纬度去换取地址的文字描述. wx.ready(() => { wx.getLocation({ type: "gcj02", success: function(res) { var location = "&location=" + res.longitude + &q

异步操作要了解的ES7的async/await

1.什么是async.await? async顾名思义是“异步”的意思,async用于声明一个函数是异步的.而await从字面意思上是“等待”的意思,就是用于等待异步完成.并且await只能在async函数中使用. 通常async.await都是跟随Promise一起使用的.为什么这么说呢?因为async返回的都是一个Promise对象同时async适用于任何类型的函数上.这样await得到的就是一个Promise对象(如果不是Promise对象的话那async返回的是什么 就是什么): awa