前言
有位朋友在后台留言建议,说公众号AspNetCore更新频率有点低,不一定是原创,转发优质文章也是极好的。这个建议好。精力不够这种老生常谈的话就不说了,说了大家也不愿意听。实际上是本人的写作水平真的不咋样,然后还想把自己了解的知识点写得系统一点。Bing同一个问题,有的人用这种方法解决掉了,有的人用那种方法也解决了,偏偏在自己这就不行。其真正的原因,是这些文章大都是局限于某一个点,并不是系统性的介绍。关于这篇,我也是查了很多资料,才逐步有了那么一点点理解,不对之处,欢迎留言指出。最后谢谢这位朋友。话说公众号有办法直接调用后台的文章么,或者直接编程添加到公众号也行,弄这东西太伤神了。
背景
在帮人弄一个小程序,小程序云开发+.Net Core Web Api做后台。
正确操作:
1.不勾选es6转es5的选项
2.勾选“增强编译”的选项
3.开发工具版本号:微信开发工具版本>=1.02.1904282
4.用promise对函数进行封装
总结1:关于启用async await语法
1.async+await是 ES7 的一个特性。在最新的ES7(ES2017)中提出的前端异步特性:async、await。
2.微信开发工具目前仅具有编译ES6 的能力。
3.为了支持ES7 的async+await,微信开发工具通过新增“增强编译”的选项来实现对ES7 的async+await的支持。
4.所以只要保证勾选“增强编译”的选项,即可用async+await来开发小程序。
5.微信开发工具1.02.1904282 以及之后版本,才有增强编译的选项。所以必须下载至少1.02.1904282 之后的版本。
增强编译
在 1.02.1904282 以及之后版本的开发工具中,增加了增强编译的选项来增强ES6转ES5的能力,启用后会使用新的编译逻辑以及提供额外的选项供开发者使用。
启用增强编译后的支持对Async/Await 的编译,未启用则不支持对对Async/Await 的编译
官方文档:https://developers.weixin.qq.com/miniprogram/dev/devtools/codecompile.html
test
下面的代码,只要勾选了“增强编译”的选项,无论ES6转ES5勾选或者不勾选,运行都是正常的。
//app.js
async fun() { setTimeout(function () { }, 3000) console.log("test1") }, async fun2() { console.log("test2") },onLaunch: async function () { //当小程序初始化完成时,会触发onLaunch(全局只触发一次) await this.fun() await this.fun2() console.log("fun()已执行完成!")
output:
test1app.js? [sm]:42 test2app.js? [sm]:50 fun()已执行完成!
总结2:关于不勾选es6转es5的选项
使用案例:https://github.com/pampa0629/EntryOutdoor
在上面的基础上,微信小程序客户端如果使用了用promise进行封装的函数, async + await,会报这个错误
原因:async+await是 ES7 的一个特性。在最新的ES7(ES2017)中提出的前端异步特性:async、await。如果微信小程序IDE里开启了ES6转ES5,则会报这个错误。
总结2:关于不勾选es6转es5的选项使用案例:https://github.com/pampa0629/EntryOutdoor 在上面的基础上,微信小程序客户端如果使用了用promise进行封装的函数, async + await,会报这个错误原因:async+await是 ES7 的一个特性。在最新的ES7(ES2017)中提出的前端异步特性:async、await。如果微信小程序IDE里开启了ES6转ES5,则会报这个错误。
解决方案:第一种方法:微信小程序IDE里,详情->本地设置 里,不勾选es6转es5,开启,【增强编译】第二种方法:引入 regenerator runtime.js
总结3:关于对函数用promise进行封装以便使用async await语法
在这块里头,有三个分支可以选择,开发者可以选择其中的一种:
分支1:对函数用promise进行封装以便使用-直接使用promise进行封装
1.对云函数的封装及其调用方法
page.js
//从数据库中获取管理后台密码 同步方式 async getAdminPassword() { const db = wx.cloud.database(); await db.collection(configCollection.Setting).where({ Name: "AdminPassword" }).get({ success: res => { this.setData({ AdminPassword: res.data[0], //返回的是一个数组,取第一个, }) }, fail: err => { console.log(err) } })
call
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.init(); },
async init() { try { await this.getAdminPassword(); console.log('run await getAdminPassword() ok') } catch (error) { console.log('run await getAdminPassword() error') } },
2.对 wx.request函数的封装及其调用方法
函数加上async关键字,在原wx.request函数基础上用promise将其包裹起来,然后添上resolve(res); 和reject(err);即完成了封装
//获取1个员工对象 getEmployeesByOpenIdPromiseFromApi2: async function (openid) { return new Promise((resolve, reject) => { wx.request({ url: 'https://api.demo.com/api/Employee/EmployeesByOpenid/' + openid, //仅为示例,并非真实的接口地址 data: { }, header: { 'content-type': 'application/json' // 默认值 }, success(res) { console.log(res.data) if (res.data.length > 0 && res.statusCode == 200) { getApp().globalData.Employee = res.data[0]; } else { console.log("app.js获取的员工信息失败:res.statusCode==" + res.statusCode) } resolve(res); }, fail: function (res) { console.log("失败" + res); reject(err); } }) }); },
call
page.js的原有函数,我们不动它,只将onload加上一个async关键字
old
onLoad: function (options)
new
onLoad: async function (options)
然后用await关键字进行调用
onLoad: async function (options) { //首先查找用户是否存在 var openid = getApp().globalData.openid; //用async/await 函数调用 try { let res = await app.getEmployeesByOpenIdPromiseFromApi2(openid); console.log('pages/adminEmployee/index/index->Onload() Info: call app.getEmployeesByOpenIdPromiseFromApi2(openid) ok res=' ,res) } catch (error) { console.log('pages/adminEmployee/index/index->Onload() Info:app.getEmployeesByOpenIdPromiseFromApi2(openid) err,eror=' ,error) } },
分支2:对函数用promise进行封装以便使用-使用wxPromisify.js库进行封装
略