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学院版权所有，转载请注明出处，谢谢合作！）