如何在浏览器使用 async/await ?

[jackieli123723]

之前已经写法 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文件中引入这个文件即可

[jackieli123723]

const sql1 = db.query('select * from table1')
const sql2 = db.query('select * from table2')
Promise.all([sql1, sql2]).then(([data1, data2])=>{
    // res.json({
    // data1,
    // data2,
    // )
}).catch(e=>{})