之前已经写法 async/await 在nodejs中的使用方法, 今天再写一个如何在浏览器中使用.

async/await 是es8才可能支持的语法, 目前大部分浏览器还是不能直接使用的, 不过没关系, 我们可以通过webpack来实现

安装依赖

package.json

"dependencies": {
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-polyfill": "^6.9.1",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-stage-0": "^6.5.0",
    "core-js": "^2.4.0",
    "regenerator-runtime": "^0.9.5",
    "webpack": "^1.13.1"
}

配置webpack

webpack.config.js

var webpack = require('webpack');
var path = require('path');

module.exports = {
    entry: {
        app: './app.js',
    },
    output: {
        filename: '[name].bundle.js',
        path: 'build',
        publicPath: "build/"
    },
    externals: {
        'jquery': 'jQuery'
    },
    module: {
        loaders: [{
            test: /\.js/,
            loader: 'babel'
        }]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        })
    ]
};

配置babel加载器

.babelrc

{
    "presets": [ "es2015", "stage-0" ]
}

代码

app.js

import 'core-js/fn/promise'
import "regenerator-runtime/runtime";

var getData = function (time) {
    return new Promise(function (resolve, reject) {
        $.get('http://cnodejs.org/api/v1/topics').then((data) => {
            resolve(data)
        })
    })
};

var start = async function () {
    let result = await getData();
    if (result.success == true) {
        let list = [];
        result.data.map(i => {
            list.push('<p>'+i.title+'</p>');
        })
        document.querySelector('#app').insertAdjacentHTML('beforeEnd', list.join(''));
    }
};

start();

这里我们引入了2个依赖, core-js/fn/promise 和 regenerator-runtime/runtime
babel的官方是直接引入 babel-polyfill , 但是看了 babel-polyfill 其实也就是引入了 core-js/shim 和 regenerator-runtime/runtime, core-js 很多我们都不需要用到, 没必要全部引入, 只需要按需引入即可, 这里我们只是需要promise

打包

在项目文件夹执行 webpack --config webpack.config.js
之后会在build文件夹生成文件, 在html文件中引入这个文件即可