转载自 为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. 数据结构与算法—Trie树

    Trie,又经常叫前缀树,字典树等等.它有很多变种,如后缀树,Radix Tree/Trie,PATRICIA tree,以及bitwise版本的crit-bit tree.当然很多名字的意义其实有交 ...

  2. RabbitMQ基本概念(一)-RabbitMQ的优劣势及产生背景

    本篇并没有直接讲到技术,例如没有先写个Helloword.我想在选择了解或者学习一门技术之前先要明白为什么要现在这个技术而不是其他的,以免到最后发现自己学错了.同时如果已经确定就是他,最好先要了解下技 ...

  3. Python学习日记(三十九) Mysql数据库篇 七

    Mysql函数 高级函数 1.BIN(N) 返回N的二进制编码 ); 执行结果: 2.BINARY(str) 将字符串str转换为二进制字符串 select BINARY('ASCII'); 执行结果 ...

  4. 普通脚本调用django程序

    #其他的脚本调用django中的程序 import os if __name__ == "__main__": #添加django项目的环境 os.environ.setdefau ...

  5. vimplus基本操作

    1. YouCompleteMe按tab键,自动补全 2. vim-commentary添加注释,以及取消注释gcc 注释当前行(普通模式)gc 可视模式下,注释当前选中的部分gcu 撤销上一次注释的 ...

  6. wentaolovesmeng.club

    wentaolovesmeng.club wentaostudy.club

  7. php中的Exception

    如果定制的EXCEPTION搞定了,默认的,就自然不在话下罗. 直接上最曲折的过程. InvalidIdException.php <?php namespace Bookstore\Excep ...

  8. Diagnostic Viewer 显示空白

    MATLAB R2014a仿真出现错误后,查找错误时,Diagnostic Viewer 显示空白.网上查的一种解决方法.我的电脑是Windows7. 1.点击 所有程序>附件>记事本(以 ...

  9. 《团队名称》第八次团队作业:Alpha冲刺day2

    项目 内容 这个作业属于哪个课程 2016计算机科学与工程学院软件工程(西北师范大学) 这个作业的要求在哪里 实验十二 团队作业8-软件测试与ALPHA冲刺 团队名称 快活帮 作业学习目标 (1)掌握 ...

  10. Spring Boot属性配置文件:application.properties 详解

    学习资料 网址 官方说明文档 https://docs.spring.io/spring-boot/docs/current/reference/html/common-application-pro ...