JS 异步处理机制(V客学院知识分享)
我们都知道,一般得程序都是单线程运行得,javascript也不例外,所有代码都是单线程执行的。
由于这个“缺陷”,导致JavaScript的所有网络操作,浏览器事件,都必须是异步执行。异步执行可以用回调函数实现:
执行以上代码,然后在查看浏览器控制台输出,会输出一下结果:
before setTimeout()
after setTimeout()
(等待1秒后)
Done
从上面得运行结果来看,这就是一种 最简单得异步处理方案。
在ES6中被统一规范Promise,由浏览器直接支持,我们可以用Promise来处理异步问题,首先测试一下你的浏览器是否支持Promise
'use strict'; new Promise(function () { // 直接运行测试: console.log('支持Promise!'); });
直接显示是否支持此功能。
'use strict'; // 清除log: var logging = document.getElementById('test-promise-log'); while (logging.children.length > 1) { logging.removeChild(logging.children[logging.children.length - 1]); }
// 输出log到页面:
function log(s) { var p = document.createElement('p'); p.innerHTML = s; logging.appendChild(p); } new Promise(function (resolve, reject) { log('start new Promise...'); var timeOut = Math.random() * 2; log('set timeout to: ' + timeOut + ' seconds.'); setTimeout(function () { if (timeOut < 1) { log('call resolve()...'); resolve('200 OK'); } else { log('call reject()...'); reject('timeout in ' + timeOut + ' seconds.'); } }, timeOut * 1000); }).then(function (r) { log('Done: ' + r); }).catch(function (reason) { log('Failed: ' + reason); });
执行以上代码输出:
上代码可以看出先输出得 call resolve()..,后输出得 Done: ,then 是等以上函数处理完,在执行得异步处理。
实际测试一下,看看Promise是如何异步执行的:
窗体顶端
'use strict'; // 清除log: var logging = document.getElementById('test-promise-log'); while (logging.children.length > 1) { logging.removeChild(logging.children[logging.children.length - 1]); } // 输出log到页面: function log(s) { var p = document.createElement('p');
p.innerHTML = s;
logging.appendChild(p);
}
窗体底端
Log:
start new Promise...
set timeout to: 0.5489507720032258 seconds.
call resolve()...
Done: 200 OK
可见Promise最大的好处是在异步执行的流程中,把执行代码和处理结果的代码清晰地分离了:
(PHP开发、web前端、UI设计、VR开发专业培训机构--V客IT学院版权所有,转载请注明出处,谢谢合作!)