async/await with webpack+babel in Browser

Hydrogen 发布于2019-08-22 10:53 / 3419人阅读

1.安装以下插件

babel-plugin-transform-runtime

babel-preset-stage-3

2.Webpack配置

    module : {
       loaders : [{
           test: /.jsx?$/,
           exclude: /node_modules/,
           loader: "babel-loader",
            query: {
                "presets": ["react", "es2015", "stage-0"]
                "plugins": [
                    ["transform-runtime", {
                        "polyfill": false,
                        "regenerator": true
                    }]
                ]
            },
       }]
    }

3.调用实例

let fetchApi = () => {
       return new Promise((resolve, reject) => {
           var xhr = new XMLHttpRequest();
           xhr.onreadystatechange = function() {
               if (xhr.readyState === 4) {
                   if (xhr.status >= 200 && xhr.status < 300) {
                       var response;
                       try {
                           response = JSON.parse(xhr.responseText);
                       } catch (e) {
                           reject(e);
                       }
                       if (response) {
                           resolve(response, xhr.status, xhr);
                       }
                   } else {
                       reject(xhr);
                   }
               }
           };
           xhr.open("GET", "https://api.douban.com/v2/user/aisk", true);
           xhr.setRequestHeader("Content-Type", "text/plain");
           xhr.send(xhr);
       })
   }

  let testAsync = async () => {
      const t = await fetchApi()
      console.log(t)
   }
   testAsync()

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91383.html

现代JS代码测试流程

摘要：有质量的代码是要有代码测试来保证的，本文就大致谈谈现在我们是如何实现使用甚至标准的代码的高效测试的。每次代码修改页面都会自动刷新，更强大的是它只会执行你修改了代码的测试用例简直神器。有质量的代码是要有代码测试来保证的，本文就大致谈谈现在我们是如何实现使用es6甚至es7（async/await）标准的JS代码的高效测试的。我们会用到以下工具 webpack 前端打包工具 moch...

cyqian 2019-08-22 10:58 评论0 收藏0
现代JS代码测试流程

摘要：有质量的代码是要有代码测试来保证的，本文就大致谈谈现在我们是如何实现使用甚至标准的代码的高效测试的。每次代码修改页面都会自动刷新，更强大的是它只会执行你修改了代码的测试用例简直神器。有质量的代码是要有代码测试来保证的，本文就大致谈谈现在我们是如何实现使用es6甚至es7（async/await）标准的JS代码的高效测试的。我们会用到以下工具 webpack 前端打包工具 moch...

supernavy 2019-05-29 16:56 评论0 收藏0
React 服务端渲染如此轻松从零开始构建前后端应用

摘要：今天这篇文章显然不是讨论这两个词语的，我们要尝试使用最新版，构件一个简单的服务端渲染应用。这样取代了完全由客户端渲染前后端分离方式模式。在场景下，我们可以使用自身的完成服务端初次渲染。这也是它在推出短短时间以来，便迅速走红的原因之一。参加或留意了最近举行的JSConf CN 2017的同学，想必对 Next.js 不再陌生， Next.js 的作者之一到场进行了精彩的演讲。其实在更早...

binaryTree 2019-08-20 18:09 评论0 收藏0
React 服务端渲染如此轻松从零开始构建前后端应用

摘要：今天这篇文章显然不是讨论这两个词语的，我们要尝试使用最新版，构件一个简单的服务端渲染应用。这样取代了完全由客户端渲染前后端分离方式模式。在场景下，我们可以使用自身的完成服务端初次渲染。这也是它在推出短短时间以来，便迅速走红的原因之一。参加或留意了最近举行的JSConf CN 2017的同学，想必对 Next.js 不再陌生， Next.js 的作者之一到场进行了精彩的演讲。其实在更早...

chinafgj 2019-08-01 17:13 评论0 收藏0
Webpack + Vue2 + Koa2 构建应用

摘要：从第一个中间件开始执行，遇到进入下一个中间件，一直执行到最后一个中间件，在逆序，执行上一个中间件之后的代码，一直到第一个中间件执行结束才发出响应。 github地址: https://github.com/zdliuccit/... 欢迎star 该构建适用PC端开发，通过配置亦可支持移动端开发具体以代码为主，持续更新.... 技术栈 Webpack3 Koa2 Axios Vue...

Bryan 2019-08-21 16:42 评论0 收藏0