Promise的应用

港控/mmm° 2023-06-08 05:59 8阅读 0赞

对于JavaScript来说，所有的代码都是单线程的，所以对于JS的一些网络操作，以及浏览器事件，都必须是异步执行的，所以说在JS中的回调函数应该说是十分的常见。

如最基础的点击事件，当按钮点击的时候会执行相应的回调函数。

var btn = document.getElementById('btn');
    btn.onclick = function(){
        //函数体
    }
    
    var btn = document.getElementById('btn');
    btn.onclick = callback()
    function callback(){
        //函数体
    }

定时器的延迟事件，当达到相应时间之后，就回去调用相应的函数。

setTimeout(function(){
        //函数体
    }, 1000);
    
    function callback() {
        //函数体
    }
    setTimeout(callback, 1000); 
    // 1秒钟后调用callback函数

NodeJs服务端回调函数，当用户请求相应的接口时，会调用相应的函数。

router.get('/user/add',function(req,res){
        //函数体
    })
    
    
    router.get('/user/add',callback(req,res))
    function callback(req,res){
        //函数体
    }

由此可见，异步操作会在将来的某个时间点触发一个函数调用。就如我们常用的ajax，就是典型的异步操作，所以说在ajax操作中是少不了回掉函数的使用的。

但是常见的操作一般都像下边这样：

ajax函数{
        巴拉巴拉一堆ajax的相关参数
        成功函数{
            成功函数体
        }
        失败函数{
            失败函数体
        }
    }

把回调函数`success(request.responseText)`和`fail(request.status)`写到一个AJAX操作里很正常，但是不好看，而且不利于代码复用。有没有更好的写法？比如写成这样：

ajax函数(成功函数，失败函数){
        一系列ajax的操作
        if(请求成功了){
            成功函数()
        }else{
            失败函数
        }
    }
    成功函数(){
        成功函数体
    }
    失败函数(){
        失败函数体
    }

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

比如一个简单的Promise的例子，生成一个0-2之间的随机数，如果小于1，则等待一段时间后返回成功，否则返回失败：

这个`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 (reason) {
        console.log('失败：' + reason);
    });

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

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

当`test`函数执行失败时，我们告诉Promise对象：

p2.catch(function (reason) {
        console.log('失败：' + reason);
    });

Promise对象可以串联起来，所以上述代码可以简化为：

new Promise(test).then(function (result) {
        console.log('成功：' + result);
    }).catch(function (reason) {
        console.log('失败：' + reason);
    });

可见Promise最大的好处是在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1bnRfYm8_size_16_color_FFFFFF_t_70][]

romise还可以做更多的事情，比如，有若干个异步任务，需要先做任务1，如果成功后再做任务2，任何任务失败则不再继续并执行错误处理函数。

要串行执行这样的异步任务，不用Promise需要写一层一层的嵌套代码。有了Promise，我们只需要简单地写：

job1.then(job2).then(job3).catch(handleError);

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1bnRfYm8_size_16_color_FFFFFF_t_70]: /images/20230531/1e7ae5f54f3d4d2d9df2f669a5685b01.png