在没有 babel-polyfill 的情况下使用 async/await答案

【问题标题】：using async/await without babel-polyfill在没有 babel-polyfill 的情况下使用 async/await
【发布时间】：2017-09-08 05:45:00
【问题描述】：

我的代码如下：

  @action async login(payload){
    try {
      this.loginLoading = true
      const data = await request('/admin/login', {
        method: 'post',
        data: payload
      })
      this.logined = true
      localStorage.setItem('token', data.token)
      this.loginLoading = false
    } catch (error) {
      console.log(error)
      message.error('login failed')
      this.logined = false
      this.loginLoading = false
    }

babel-polyfill 会将上面的代码转换为：

       return _regenerator2.default.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                _context.prev = 0;

                this.loginLoading = true;
                _context.next = 4;
                return (0, _request2.default)('/admin/login', {
                  method: 'post',
                  data: payload
                });

              case 4:
                data = _context.sent;

                this.logined = true;
                localStorage.setItem('token', data.token);
                this.loginLoading = false;
                _context.next = 16;
                break;

              case 10:
                _context.prev = 10;
                _context.t0 = _context['catch'](0);

                console.log(_context.t0);
                _message2.default.error('login failed');
                this.logined = false;
                this.loginLoading = false;

              case 16:
              case 'end':
                return _context.stop();
            }
          }

转换后的代码将使用源映射重命名 chrome devl-tool 中难以读取和调试的变量，实际上最新的 chrome 支持 async/await 语法，所以我不想在开发中使用 babel-polyfill。

但是如果移除 babel-polyfill，会抛出 regeneratorRuntime is not defined.

【问题讨论】：

babel-polyfill 不会转换你的文件，它是 webpack 配置中的 babel-loader。你试过删除它吗？

标签： javascript reactjs webpack async-await babeljs

【解决方案1】：

如果您已将浏览器定位设置为 chrome >= 59，那么您只需将使用本机生成器，并且永远不会使用 polyfill。

https://medium.com/@zwacky/add-es7-async-await-support-into-your-non-bleeding-edge-build-process-ad0dded0d002

有趣的注意事项：

如果你只需要生成器 polyfill — async/await — 那么你可以直接使用facebook/regenerator，也就是无论如何都被 babel-polyfill 使用。

【讨论】：

谢谢！导入“regenerator-runtime/runtime”；添加所需的 polyfill。