转载自 为Promise插上可取消的翅膀

const makeCancelable = (promise) => {
let hasCanceled_ = false;
const wrappedPromise = new Promise((resolve, reject) => {
promise.then((val) =>
hasCanceled_ ? reject({isCanceled: true}) : resolve(val)
);
promise.catch((error) =>
hasCanceled_ ? reject({isCanceled: true}) : reject(error)
);
});
return {
promise: wrappedPromise,
cancel() {
hasCanceled_ = true;
},
};
};

  

//调用
const somePromise = new Promise(r => setTimeout(r, 1000));//创建一个异步操作
const cancelable = makeCancelable(somePromise);//为异步操作添加可取消的功能
cancelable
.promise
.then(() => console.log('resolved'))
.catch(({isCanceled, ...error}) => console.log('isCanceled', isCanceled));
// 取消异步操作
cancelable.cancel();

  

[Web] 取消Promise的更多相关文章

  1. react hooks useEffect 取消 promise

    react hooks useEffect 取消 promise cancel promise https://github.com/facebook/react/issues/15006#issue ...

  2. 中断或取消Promise链的可行方案

    ES6标准引入的异步编程解决方案Promise,能够将层层嵌套的回调转化成扁平的Promise链式调用,优雅地解决了“回调地狱”的问题.当Promise链中抛出一个错误时,错误信息沿着链路向后传递,直 ...

  3. js 如何取消promise

    1: 使用reject function hello() { let _res, _rej: any; const promise = new Promise((res, rej) => { _ ...

  4. Promise小书(长文)

    promise基础 Promise是异步编程的一种解决方案.ES6 Promise的规范来源于Promises/A+社区,它有很多版本的实现. Promise比传统的解决方案(回调函数和事件)更合理和 ...

  5. JavaScript之Promise对象

    含义 Promise 是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了 Promise 对象. ...

  6. BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js

    BAT 前端开发面经 —— 吐血总结   目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...

  7. Web前端面试题整合,持续更新【可以收藏】

    饭后闲来无事,把这几年带学生用的一些面试题整合一下,供上!拿走,不客气!应付一般公司的二面基本上是够用了.祝你早日拿到心仪的offer. css相关 1. 万能居中 1.margin: 0 auto; ...

  8. ES6深入学习记录(二)promise对象相关

    1.Promise的含义 Promise是异步编程的一种解决方案,比传统的解决方案--回调函数和事件更合理和强大.ES6将其写进了语言标准,统一了用法,原生提供了promise对象. 所谓Promis ...

  9. Javascript 中的神器——Promise

    Promise in js 回调函数真正的问题在于他剥夺了我们使用 return 和 throw 这些关键字的能力.而 Promise 很好地解决了这一切. 2015 年 6 月,ECMAScript ...

随机推荐

  1. rf中的条件判断与循环

    条件判断 run keyword if condition name *args ... ELSE IF conditon name *args ...ELSE name *args conditio ...

  2. httprunner运行报错问题:base url missed

    在httprunner运行报错问题 代码书写: 当此段yml文件运行时会出现一下错误 在出现此错误时,为base_url的格式出现错误,只需修改base_url的位置 修改位置后运行yml文件 运行成 ...

  3. Ansible 常用模块(一)

    一.Ansible简介 Ansible是新出现的自动化运维工具,基于python开发,集合了众多运维工具(puppet(ruby).cfengine.chef.func.fabric.)的优点,实现了 ...

  4. php7新增的两个操作符---null合并及飞船操作符

    <?php //null合并操作符?? //(太空)飞船操作符<=> //The operator returns 0 if both operands are equal, 1 i ...

  5. httprunner学习10-测试报告ExtentReport

    前言 httprunner默认生成的报告不怎么美观,里面还有第二套报告模板extent_report_template.html. extent_report_template 使用 hrun -h ...

  6. Spring Cloud 之 Consul 知识点:服务注册与发现(类似工具:Eureka、ZooKeeper、Etcd)

    资料 网址 springcloud(十三):注册中心 Consul 使用详解 http://ityouknow.com/springcloud/2018/07/20/spring-cloud-cons ...

  7. PLSQL 美化规则文件详解

    PL/SQL中有个代码优化的功能,里面可以定义规则,挺好用的,跟大家分享下: 1.首先新建一个my.br文件,在文件中复制以下内容 Version=1 RightMargin=90 Indent=4 ...

  8. loadrunner:传json

    loadrunner传k-v,用web_custom_request函数. init里面执行登录,根据返回获取到tokenId,action中,执行登录后的操作. 详细脚本如下: vuser_init ...

  9. MapTask工作机制

    (1)Read阶段:MapTask通过用户编写的RecordReader,从输入InputSplit中解析出一个个key/value. (2)Map阶段:该节点主要是将解析出的key/value交给用 ...

  10. http协议 | http缓存

    缓存控制 1.禁止进行缓存:缓存中不得存储任何关于客户端请求和服务端响应的内容.每次由客户端发起的请求都会下载完整的响应内容. Cache-Control: no-store Cache-Contro ...