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

背景

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

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

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

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

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

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

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

• gulpfile.js
  在gulpfile中添加一個(gè)去掉上面的注釋的任務(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'));
  });

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