zoukankan      html  css  js  c++  java
  • 如何在外部终止一个pengding状态的promise对象

    今天在整理前段时间做过的项目,发现之前在集成web环信的时候遇到过一个奇怪的需求:
    需要终止一个正在进行等待返回的promise,或者阻止其调用resolve和reject。(具体为何会有这种需求我也不太记得了。。。

    现在回头看,一定会有其他的常规解决方案)。

    不过本着对未知牛角尖的专研精神(最近有点闲),在咨询知乎大神,重读阮大神的《es6入门》书中promise一章后,

    找到了一个原生js的解决方案:Promise.race。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
        </head>
        <body>
            <button onclick="getInterface()">发送请求</button>
            <button id="cancel">取消调用接口</button>
            <script type="text/javascript">
                //Promise.race([a,b])参数为一个promise对象组成的数组,
                //此方法用来比较啊a和b哪一个promise先返回,Promise.race结果就返回这个先返回的promise参数
    
                function getInterface() {
                    var promise1 = new Promise(function(resolve, reject) {
                //模拟ajax异步请求 setTimeout(resolve,
    3000, '接口返回成功!'); }); var promise2 = new Promise(function(resolve, reject) { document.querySelector('#cancel').addEventListener('click', function() { reject('取消等待接口!'); }); }); Promise.race([promise1, promise2]).then(function(value) { console.log(value); }).catch(function(value) { console.log(value); }); } </script> </body> </html>

    上面的代码点击发送请求按钮后,调用getIterface方法,

    方法内创建并立即执行两个promise函数:promise1promise2Promise.race方法立即开始监听这两个promise对象的状态。

    1. 如果3秒内用户有任何操作,那么promise1内的resolve方法被调用:此时“接口”返回成功,Promise.race不再监听promise2的状态,

    直接返回接口的返回结果:'接口返回成功!'。

    2. 如果3秒内用户点击取消调用接口按钮 ,那么promise2内的reject方法被调用,此时Promise.race不再监听promise2(异步接口)的返回状态,

    直接返回promise2的返回结果:'取消等待接口'。

    这样就可以模拟外部中断promise返回结果了,比如 promise1是一个ajax请求,那么就可以在返回前在Promise.race中abort()请求了。

  • 相关阅读:
    Python之控制台进度条实现
    Flask之接入自定义的图片验证码
    CISSP学习笔记——域1安全与风险管理
    Nginx+Keepalived实现四层及七层负载均衡
    【葵花宝典】kolla部署OpenStack-AllinOne
    【葵花宝典】All-in-One模式安装KubeSphere
    【易筋经】Llinux服务器初始化及常用命令大全
    python去除文件中重复的行
    PowerDesigner批量增加字段
    Docker使用
  • 原文地址:https://www.cnblogs.com/zhuxiaoweb/p/8360663.html
Copyright © 2011-2022 走看看