[微信小程序] 终于能够愉快的使用 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