关于promise的进修和拓展

Promise的进修和拓展

之前开辟的时候偶然会在要求中,或许其他场景中用到promise,只晓得它是什么(链式挪用,用于要求的后返回值得操纵之类的),也许怎样用,却没有深切相识。

原由:(在参考了廖雪峰的promise解说后https://www.liaoxuefeng.com/w…

在javascript中,一切的代码都是单线程举行的。
因为这个“缺点”,致使JavaScript的一切收集操纵,浏览器事宜,都必须是异步实行。异步实行能够用回调函数完成(否者在加载完js文件后。其他操纵也不会发生了):

参数:executor是带有 resolve 和 reject 两个参数的函数 。Promise组织函数实行时马上挪用executor 函数, resolve 和 reject 两个函数作为参数传递给executor(executor 函数在Promise组织函数返回所建promise实例对象前被挪用)。resolve 和 reject 函数被挪用时,分别将promise的状况改成fulfilled(完成)或rejected(失利)。executor 内部通常会实行一些异步操纵,一旦异步操纵实行终了(能够胜利/失利),要么挪用resolve函数来将promise状况改成fulfilled,要么挪用reject 函数将promise的状况改成rejected。假如在executor函数中抛出一个毛病,那末该promise 状况为rejected。

由此能够晓得,一个promise包括3个状况:(注重,不包括resolve

)

pending: 初始状况,既不是胜利,也不是失利状况。

fulfilled: 意味着操纵胜利完成。

rejected: 意味着操纵失利。

function callback() {
    console.log('Done');
}
console.log('before setTimeout()');
setTimeout(callback, 0); // 1秒钟后挪用callback函数
console.log('after setTimeout()');

视察上述代码实行,在Chrome的控制台输出能够看到:

before setTimeout()
after setTimeout()
Done

AJAX就是典范的异步操纵

var ajax = ajaxGet('http://...');
ajax.ifSuccess(success)
    .ifFail(fail);

一致实行AJAX逻辑,不关心怎样处理效果,然后,依据效果是胜利照样失利,在未来的某个时候挪用success函数或fail函数。

这个时候promise要领就应运而生了。

一个简朴的promise运用

天生一个0-2之间的随机数,假如小于1,则守候一段时间后返回胜利,不然返回失利:

function test(resolve, reject) {
    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);
}

有了实行函数,我们就能够用一个Promise对象来实行它,并在未来某个时候获得胜利或失利的效果:

var p1 = new Promise(test);
var p2 = p1.then(function (result) {
    console.log('胜利:' + result);
});
var p3 = p2.catch(function (reason) {
    console.log('失利:' + reason);
});

也能够写成链式挪用的情势

new Promise(test).then(function (result) {
    console.log('胜利:' + result);
}).catch(function (reason) {
    console.log('失利:' + reason);
});
    原文作者:Chaos
    原文地址: https://segmentfault.com/a/1190000019345533
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞