前端如何实现请求中断

在项目中可能遇到以下场景：

• 在Vue或React单页应用中，组件A挂载完毕之后向后台服务发起请求拉取数据，但是由于加载过慢，用户可能期间发生路由跳转或回退，导致组件A卸载，但是组件内部的网络请求并没有立即停止下来，此时的响应数据对于已卸载的组件A而言已经无效。若刚好此时请求响应错误，就可能导致前端实现的兜底弹窗出现在跳转后的页面中，造成视觉干扰；
• 页面存在定时轮询业务，即固定间隔一段时间再次发起请求，这样就可能存在多个请求间的竞争关系，如果上一个请求的响应速度比最近一次请求的响应速度慢，则前者就会覆盖后者，从而导致数据错乱；

以上是工作项目中遇到的场景。然后查阅了相关的博客，还有要下相关的场景。

• 类似于关键字搜索或模糊查询等需要频繁发起网络请求的相关业务，可能在一定程度上为了优化程序的执行性能，减少冗余的网络IO，我们会使用防抖(debounce)函数来对请求逻辑进行包装，减少查询次数以降低服务器压力，但是依旧避免不了由于加载耗时过长导致新老请求数据错乱的问题；
• 针对前端大文件上传等上传服务，需要实现上传进度的暂停与恢复，即断点续传。

减少客户端和服务器之间的无效传输，是页面优化的一种方法。

浏览器原生实现的XMLHttpRequest(以下简称XHR)构造函数：

在XHR实例上为我们提供了一个abort方法用于终止该请求，并且当一个请求被终止的时候，该请求所对应的XHR实例的readyState属性将会被设置为XMLHttpRequest.UNSET(0)，同时status属性会被重置为0。

function request({
  // 省略入参
  ...
} = {}) {
  return new Promise((resolve, reject) => {
    // 省略代码
    .