[问答]

如何使用abortController终止fetch和promise？

1290

问答对人有帮助，内容完整，我也想知道答案 0 使用abortController 终止fetch和promise的方法 0
2020-11-5 08:07:35　　评论淘帖0 邀请回答您可以邀请以下用户，快速回答问题 × 陈该类别下有 5 个回答。邀请回答 jf_71236567 该类别下有 3 个回答。邀请回答 tijing忽忽该类别下有 2 个回答。邀请回答 HELLOKITTYNEW 该类别下有 2 个回答。邀请回答 dlksmad 该类别下有 2 个回答。邀请回答 mu0543 该类别下有 2 个回答。邀请回答 nvwwerwr 该类别下有 2 个回答。邀请回答 60user28 该类别下有 2 个回答。邀请回答 To7ny 该类别下有 2 个回答。邀请回答 yhsales 该类别下有 2 个回答。邀请回答 puzhang549 该类别下有 2 个回答。邀请回答 ZONEK 该类别下有 2 个回答。邀请回答 dang28 该类别下有 1 个回答。邀请回答 mmvjsuds 该类别下有 1 个回答。邀请回答顺风之鱼该类别下有 1 个回答。邀请回答 wq644921241 该类别下有 1 个回答。邀请回答 asd005 该类别下有 1 个回答。邀请回答 byyyyyyyyyyyy 该类别下有 1 个回答。邀请回答陈涛少01 该类别下有 1 个回答。邀请回答 naugia 该类别下有 1 个回答。邀请回答举报高媛相关推荐 • 如何使用fetch从ESP8266获取JSON响应？ 140 • 怎么读取N1911A上下垂计算的跟踪数据 1763 • 如何解决iso-codes-4.4-r0 do fetch error的问题？ 264 • HarmonyOS JS布局开发 fetch不到数据 743 • 如何使用std::future/std::promise 和 std::packaged_task来促进esp32上的多线程？ 171 • Harmonyos js fetch发起网络请求，任意地址都是直接fail回调code为202是什么原因？ 978 • FETCH命令和MEASURE命令有什么区别？ 2292 • 使用FETCH后如何从缓冲区读取数据？ 1796 • ARM embedded memory ip的产生，couldn't run spreadsheet generator to fetch results 4750 • 双重FOR循环终止，里面的终止了，外什么还在继续循环 1806 1个回答

答案对人有帮助，有参考价值 0 在使用 fetch 和 promise 的时候，中途终止它们是一个很常见的需求，我们来看一看怎么实现。通过本文您可以学到：怎么在外面终止 xhr 请求 abortController 是什么怎么使用 abortController 终止 fetch 请求怎么使用 abortController 终止 promise 请求怎么在外部终止 xhr 请求我们先来回顾一下怎么在外部终止 xhr 请求: let xhr = new XMLHttpRequest();xhr.onload = (res) => console.log(res);xhr.onerror = (err) => console.log(err);xhr.onabort = () => console.log('aborted!');xhr.open('get', 'https://slowmo.glitch.me/5000');xhr.send();setTimeout(() => { xhr.abort();}, 200);AbortController 参考资料：abortController接口 AbortController 接口表示一个控制器对象，允许你根据需要中止一个或多个 Web 请求。目前这个接口的兼容性是除了IE已经能够兼容所有主流浏览器了。示例如下： const controller = new AbortController();const signal = controller.signal;signal.addEventListener('abort', () => { console.log('aborted!');});controller.abort();中止 fetch 请求 fetch 方法的第二个参数可以接收 signal 参数，当被中止时，会 reject 一个名字为 AbortError 的 error 并被 catch 捕捉到，示例如下： const controller = new AbortController();const signal = controller.signal;fetch('https://slowmo.glitch.me/5000', { signal }) .then(res => res.json()) .then(res => console.log(res)) .catch((err) => { if (err.name === 'AbortError') { console.log('aborted'); } else { console.log('error'); } });setTimeout(() => { controller.abort();}, 200);中止 promise 其实不需要 AbortController也可以实现手动中止 promise，还是用那套劫持的方法。示例如下： class MyPromise { constructor(executor) { let abort = null; let p = new Promise((resovle, reject)=>{ executor(resovle, reject); abort = err => reject(err); }) p.abort = abort; return p; }}// testlet test = new MyPromise((resolve) => { setTimeout(() => resolve(1), 200);});// 这里不能直接把 then 和 catch 加到上面的末尾去test.then(res => console.log(res)).catch(err => console.log(err));test.abort('aborted!');上面有一些不完美，就是在初始化 test 的时候，后面不能带上 then 或 catch 方法，因为这些方法返回的是一个 Promise 实例而不是 MyPromise 实例。使用 AbortController 可以解决这个问题，示例如下： class MyPromise { constructor(executor, { signal }) { return new Promise((resolve, reject)=>{ executor(resolve, reject); if (signal) { signal.addEventListener('abort', () => { reject('aborted!'); }); } }) }}// testconst controller = new AbortController();const signal = controller.signal;let test = new MyPromise((resolve) => { setTimeout(() => resolve(1), 200);}, { signal }).then(res => console.log(res)).catch(err => console.log(err));controller.abort('aborted!');上面两种方案看起来很美好，但是其实并不完美，因为 then 和 catch 方法返回的是一个 Promise 实例而不是 MyPromise 实例，所以目前这个 abort 方法不能中断 then 或 catch 里面的内容，如果要修正的话，需要再继续改写 then 和 catch 方法。

2020-11-5 16:23:48 评论举报姬中岩