[微信小程序] 終於能夠愉快的使用 async/await 啦

[小程序] 終於能夠愉快的使用 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
• 項目模板
  在這裏 這是本人的從個人生產項目中提取的一個模板 各位能夠參考一下

重點

• tsconfig.json
  TypeScript2.1的更新日誌中說 要在ES5中用async/await 須要在tsconfig.json中的lib添加promise 從而告訴tsc 我如今要用promise了 編譯的時候注意點 不要瞎報錯

  {
      "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'));
  });

  我的感受這個辦法有點傻 哪位大神想到更好的辦法 歡迎分享

參考

• we-app-typescript
• Readme