这篇文章主要是想说一下 怎么在微信小程序中使用async/await从而逃离回调地狱
背景
最近一直在搞微信小程序 用的语言是TypeScript 小程序的api都是回调形式 用起来就是各种回调嵌套 我个人很不喜欢 所以一直想用async/await
之前用TypeScript target到ES2015 可以用async/await 但是在iphone上表现不好 后来微信开发者工具的更新日志中又提到 移除了promise 开发者需要自行引入 导致target到ES2015的async/await也不能用了
最近 TypeScript发布了2.1版本 从更新日志中看到 TypeScript2.1 增加了对ES5的async/await支持
经过实践 炒鸡好用
原理
TypeScript会把所有async/await编译成ES5支持的语法 target ES2015的时候是用yield实现的 到ES5则使用swicth case 实现的
然后在用到async/await的文件中引入Promise polyfill 微信小程序就可以正常的工作了
准备
-
TypeScript
上面一直在说这个 所以这个肯定是必须的 -
VS Code
微软爸爸出的开源编辑器 听说在某大型同性交友网站上很火 -
Promise polyfill
Promise是用async/await的基础 既然微信移除了 那么只好手动引入了 ES6 Promise -
Gulp
需要用它来执行一个特殊的任务 保证可以愉快的使用async/await -
项目模板
在这里 这是本人的从我的生产项目中提取的一个模板 各位可以参考一下
重点
-
{ "compilerOptions": { "lib": ["dom", "es2015.promise", "es5"] } } -
引入Promise polyfill
局限于微信小程序的文件模块特性 每一个用到async/await的ts文件 都需要引入Promise polyfill// var Promise = require('./utils/es6-promise.min').Promise;之所以是注释状态 是因为Promise是关键词 不注释掉的话 VS Code会报错 并且tsc编译也会报错
-
gulpfile.js
在gulpfile中添加一个去掉上面的注释的任务 并在tsc编译之后执行 这样就可以顺利引入Promise polyfill了const gulp = require('gulp'); const replace = require('gulp-replace'); gulp.task('addPromise', () => { gulp.src('dist/**/*.js') .pipe(replace('// var Promise', 'var Promise')) .pipe(gulp.dest('dist')); });个人感觉这个办法有点傻 哪位大神想到更好的办法 欢迎分享
