這篇文章主要是想說一下 怎么在微信小程序中使用async/await從而逃離回調(diào)地獄

背景

最近一直在搞微信小程序 用的語言是TypeScript 小程序的api都是回調(diào)形式 用起來就是各種回調(diào)嵌套 我個人很不喜歡 所以一直想用async/await
之前用TypeScript target到ES2015 可以用async/await 但是在iphone上表現(xiàn)不好 后來微信開發(fā)者工具的更新日志中又提到 移除了promise 開發(fā)者需要自行引入 導(dǎo)致target到ES2015的async/await也不能用了
最近 TypeScript發(fā)布了2.1版本 從更新日志中看到 TypeScript2.1 增加了對ES5的async/await支持
經(jīng)過實(shí)踐 炒雞好用

• TypeScript
  上面一直在說這個 所以這個肯定是必須的
• VS Code
  微軟爸爸出的開源編輯器 聽說在某大型同性交友網(wǎng)站上很火
• Promise polyfill
  Promise是用async/await的基礎(chǔ) 既然微信移除了 那么只好手動引入了 ES6 Promise
• Gulp
  需要用它來執(zhí)行一個特殊的任務(wù) 保證可以愉快的使用async/await
• 項(xiàng)目模板
  在這里 這是本人的從我的生產(chǎn)項(xiàng)目中提取的一個模板 各位可以參考一下

• tsconfig.json
  TypeScript2.1的更新日志中說 要在ES5中用async/await 需要在tsconfig.json中的lib添加promise 從而告訴tsc 我現(xiàn)在要用promise了 編譯的時候注意點(diǎn) 不要瞎報(bào)錯

  {
      "compilerOptions": {
          "lib": ["dom", "es2015.promise", "es5"]
      }
  }

• 引入Promise polyfill
  局限于微信小程序的文件模塊特性 每一個用到async/await的ts文件 都需要引入Promise polyfill

  // var Promise = require('./utils/es6-promise.min').Promise;

  之所以是注釋狀態(tài) 是因?yàn)镻romise是關(guān)鍵詞 不注釋掉的話 VS Code會報(bào)錯 并且tsc編譯也會報(bào)錯

• gulpfile.js
  在gulpfile中添加一個去掉上面的注釋的任務(wù) 并在tsc編譯之后執(zhí)行 這樣就可以順利引入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'));
  });

  個人感覺這個辦法有點(diǎn)傻 哪位大神想到更好的辦法 歡迎分享