解决javascript 异步问题的最佳实践

  cheney

async/await 简单示例

安装 nodejs

首先需要安装 node.js ,到官网 下载合适的版本安装。

###安装 babel .

npm install --global babel

###编写混入 ES7 标准的 js 代码

文件 logic.js

var delay = function (n) {
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            resolve(n)
        },n *1000)
    })
}

var test = async function(){
    var ret = await delay(3);
    var ret2 = await delay(5);
    console.debug(ret)
    console.debug(ret2)
    console.log(ret,ret2)
}

test()

第一行定义了一个 delay 函数,通常 js 的代码都是异步的,写在 delay 函数之后的代码并不是在延时之后调用的,所以才有了将需要延时调用的函数传递给 delay 函数的回调方式。但是如果将 delay 函数的返回值做成 Promise 对象。然后就可以用 await 关键字像调用同步函数那样调用异步函数了。

“编译”

由于浏览器并不支持 ES7 标准,所以我们需要将这段混入代码先编译为浏览器可用的代码。使用命令 : babel logic.js --out-file logic.asm.js
生成一份 logic.asm.js

编写 html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>async/await</title>
    <script type="application/javascript" src="browser-polyfill.min.js"></script>
</head>
<body>
<script type="application/javascript" src="logic.asm.js"></script>
</body>
</html>

完成了,8秒之后控制台才会真正输出东西。