async/await with webpack+babel in Browser

Hydrogen 發(fā)布于2019-08-22 10:53 / 3573人閱讀

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.調(diào)用實(shí)例

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()

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://hztianpu.com/yun/91383.html

相關(guān)文章

現(xiàn)代JS代碼測(cè)試流程

摘要：有質(zhì)量的代碼是要有代碼測(cè)試來保證的，本文就大致談?wù)劕F(xiàn)在我們是如何實(shí)現(xiàn)使用甚至標(biāo)準(zhǔn)的代碼的高效測(cè)試的。每次代碼修改頁面都會(huì)自動(dòng)刷新，更強(qiáng)大的是它只會(huì)執(zhí)行你修改了代碼的測(cè)試用例簡直神器。有質(zhì)量的代碼是要有代碼測(cè)試來保證的，本文就大致談?wù)劕F(xiàn)在我們是如何實(shí)現(xiàn)使用es6甚至es7（async/await）標(biāo)準(zhǔn)的JS代碼的高效測(cè)試的。我們會(huì)用到以下工具 webpack 前端打包工具 moch...

cyqian 2019-08-22 10:58 評(píng)論0 收藏0
現(xiàn)代JS代碼測(cè)試流程

摘要：有質(zhì)量的代碼是要有代碼測(cè)試來保證的，本文就大致談?wù)劕F(xiàn)在我們是如何實(shí)現(xiàn)使用甚至標(biāo)準(zhǔn)的代碼的高效測(cè)試的。每次代碼修改頁面都會(huì)自動(dòng)刷新，更強(qiáng)大的是它只會(huì)執(zhí)行你修改了代碼的測(cè)試用例簡直神器。有質(zhì)量的代碼是要有代碼測(cè)試來保證的，本文就大致談?wù)劕F(xiàn)在我們是如何實(shí)現(xiàn)使用es6甚至es7（async/await）標(biāo)準(zhǔn)的JS代碼的高效測(cè)試的。我們會(huì)用到以下工具 webpack 前端打包工具 moch...

supernavy 2019-05-29 16:56 評(píng)論0 收藏0
React 服務(wù)端渲染如此輕松從零開始構(gòu)建前后端應(yīng)用

摘要：今天這篇文章顯然不是討論這兩個(gè)詞語的，我們要嘗試使用最新版，構(gòu)件一個(gè)簡單的服務(wù)端渲染應(yīng)用。這樣取代了完全由客戶端渲染前后端分離方式模式。在場景下，我們可以使用自身的完成服務(wù)端初次渲染。這也是它在推出短短時(shí)間以來，便迅速走紅的原因之一。參加或留意了最近舉行的JSConf CN 2017的同學(xué)，想必對(duì) Next.js 不再陌生， Next.js 的作者之一到場進(jìn)行了精彩的演講。其實(shí)在更早...

binaryTree 2019-08-20 18:09 評(píng)論0 收藏0
React 服務(wù)端渲染如此輕松從零開始構(gòu)建前后端應(yīng)用

摘要：今天這篇文章顯然不是討論這兩個(gè)詞語的，我們要嘗試使用最新版，構(gòu)件一個(gè)簡單的服務(wù)端渲染應(yīng)用。這樣取代了完全由客戶端渲染前后端分離方式模式。在場景下，我們可以使用自身的完成服務(wù)端初次渲染。這也是它在推出短短時(shí)間以來，便迅速走紅的原因之一。參加或留意了最近舉行的JSConf CN 2017的同學(xué)，想必對(duì) Next.js 不再陌生， Next.js 的作者之一到場進(jìn)行了精彩的演講。其實(shí)在更早...

chinafgj 2019-08-01 17:13 評(píng)論0 收藏0
Webpack + Vue2 + Koa2 構(gòu)建應(yīng)用

摘要：從第一個(gè)中間件開始執(zhí)行，遇到進(jìn)入下一個(gè)中間件，一直執(zhí)行到最后一個(gè)中間件，在逆序，執(zhí)行上一個(gè)中間件之后的代碼，一直到第一個(gè)中間件執(zhí)行結(jié)束才發(fā)出響應(yīng)。 github地址: https://github.com/zdliuccit/... 歡迎star 該構(gòu)建適用PC端開發(fā)，通過配置亦可支持移動(dòng)端開發(fā) 具體以代碼為主，持續(xù)更新.... 技術(shù)棧 Webpack3 Koa2 Axios Vue...

Bryan 2019-08-21 16:42 評(píng)論0 收藏0