• Promise


    在JavaScript的世界中,所有代码都是单线程执行的。

    由于这个‘缺陷’,导致JavaScript的所有网络操作、浏览器事件,都必须是异步执行。异步执行可以用回调函数实现:

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

    观察上述代码执行,在Chrome的控制台输出可以看到:

    brfore setTimeout()

    after setTimeout()

    (等待1秒后)

    Done

    可见,异步操作会在将来的某个时间点触发一个函数调用。

    AJAX就是典型的异步操作。以上一节代码为例:

        request.onreadstatechange = function() {
                if(request.readyState === 4){
                    if(request.status == 200) {
                        return success(request.responseText);
                    } else {
                        return fail(request.status);
                    }
                }
            }

    把回调函数success(request.responseText)和fail(request.status)写到一个AJAX操作里很正常,但是不好看,而且不利于代码复用。

    写成这样?

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

    这种链式写法的好处在于,先统一执行AJAX逻辑,不关心如何处理结果,然后,根据成功还是失败,在将来的某个时候调用success函数或者fail函数。这种“承诺将来会执行”的对象在JavaScript中称为Promise对象。

    Promise有各种开源实现。在ES6中被统一规范,由浏览器直接支持。

    例子:生成一个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);
            }

    这个test()函数有两个参数,这两个参数都是函数,如果执行成功,我们将调用resolve('200 OK‘),如果执行失败,我们将调用reject('timeout in ' + timeOut + 'seconds')。可以看出,test()函数只关心自身的逻辑,并不关心具体的resolve和reject将如何处理结果。

    有了执行函数,我们就可以用一个Promise对象来执行它,并在将来某个时刻获得成功或者失败的结果:

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

    变量p1是一个promise对象,它负责执行test函数。由于test函数在内部是异步执行的,当test函数执行成功时,我们告诉Promise对象。

        //如果成功,执行这个函数
            p1.then(function(result) {
                console.log('成功:' + result);
            });

    当test函数执行失败时,我们告诉Promise对象:

  • 相关阅读:
    相对定位
    51nod三大经典博弈(模板)
    51nod1306斐波那契公约数(数论推公式,矩阵快速幂优化递推序列)
    洛谷P1313计算系数(数学二项式次方展开定理,快速幂,除法取模逆元)
    hduoj1052田忌赛马(贪心好题略难,思维,模拟)
    洛谷P1134阶乘问题(数论,末尾0的个数变形,思维转换)
    洛谷P又是毕业季2(数学数论,找规律,公约数)
    洛谷p1309瑞士轮(好题,理解归并排序本质)
    洛谷p1582倒水(思维好题,数学,2进制问题,代码实现)
    洛谷p1338末日的传说(思维好题,数学)
  • 原文地址:https://www.cnblogs.com/yuanxinru321/p/7768894.html
Copyright © 2020-2023  润新知