资讯专栏INFORMATION COLUMN

async/await with webpack+babel in Browser

Hydrogen / 3426人阅读

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 评论0 收藏0
  • 现代JS代码测试流程

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

    supernavy 评论0 收藏0
  • React 服务端渲染如此轻松 从零开始构建前后端应用

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

    binaryTree 评论0 收藏0
  • React 服务端渲染如此轻松 从零开始构建前后端应用

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

    chinafgj 评论0 收藏0
  • Webpack + Vue2 + Koa2 构建应用

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

    Bryan 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<