asp.net程序涉及案例_微信小程序里使用原生的es7的async await语法的正确方法

前言

有位朋友在后台留言建议，说公众号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库进行封装

略

分支3:TypeScript 2.1

略

微信公众号：AspNetCore   或者 AspNet