[微信小程序] 終于可以愉快的使用 async/await 啦
這篇文章主要是想說一下 怎么在微信小程序中使用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')); });個人感覺這個辦法有點傻 哪位大神想到更好的辦法 歡迎分享
