转载自 为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. 《微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记1)WePY开发环境的安装

    WePY的安装或更新都通过npm进行,全局安装或更新WePY命令行工具,使用以下命令: npm install wepy-cli -g 稍等片刻,成功安装后,即可创建WePY项目. 注意:如果npm安 ...

  2. JS this指向总结

    使用 JavaScript 开发的时候,很多开发者多多少少会被 this 的指向搞蒙圈,但是实际上,关于 this 的指向,记住最核心的一句话:哪个对象调用函数,函数里面的this指向哪个对象. 下面 ...

  3. Java深入学习(3):线程池原理

    线程池的特点: 降低资源:通过重复利用已创建的线程降低线程创建和销毁的损耗 提高效率:当任务到底时,不需要等待,立即执行 方便管理:统一分配,调优和监控等 线程池的创建方式: 1.CachedThre ...

  4. Python之路(第四十一篇)线程概念、线程背景、线程特点、threading模块、开启线程的方式

    一.线程 ​ 之前我们已经了解了操作系统中进程的概念,程序并不能单独运行,只有将程序装载到内存中,系统为它分配资源才能运行,而这种执行的程序就称之为进程.程序和进程的区别就在于:程序是指令的集合,它是 ...

  5. MySQL的JOIN连接

    MySQL的JOIN join的含义跟英文单词"join"一样,连接连接两张表.分为 内连接:inner join 外连接   (1)左外连接(左边的表不加限制):left joi ...

  6. 【转】STM32生成的文件大小探索

    一般在stm32工程使用keil编译之后,keil的build output栏目下面会出现如图所示的输出信息,其中会显示code 大小 RO-data.RW-data .ZI-data的大小.一般别人 ...

  7. Odoo中的记录集

    转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/10826218.html 一:record set 1:获取记录集 1)在@api.multi修饰器修饰的函数 ...

  8. Spring Cloud 手记

    文档:https://www.springcloud.cc/spring-cloud-dalston.html#_features 一年了,我们都用 Spring Cloud 干了啥?:https:/ ...

  9. 5.Lvs+Keepalived健康检查

    1. Nginx+keepalived对后端服务器心跳检查(需要自定义脚本) 原理:Keepalived并不跟nginx耦合,它俩完全不是一家人但是keepalived提供一个机制:让用户自定义一个s ...

  10. Educational Codeforces Round 67 D. Subarray Sorting

    Educational Codeforces Round 67 D. Subarray Sorting 传送门 题意: 给出两个数组\(a,b\),现在可以对\(a\)数组进行任意次排序,问最后能否得 ...