通过竞态请求处理请求取消和超时操作

最近阅读时了解到的一个技巧，也许对于取消请求之类的动作还可以这样另辟蹊径

AbortController

AbortController对象可以允许我们控制一个或多个请求的暂停，在Axios中，从0.22版本开始，也完全废弃了原先的取消请求方案，使用AbortController替代

const controller = new AbortController();

axios.get('/foo/bar', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// 取消请求
controller.abort()

场景

通常在业务中，我们会遇到取消请求或者超时的处理，大多数情况下我们会通过拦截器的形式去针对接口的返回做一些处理

但有时我们还需要在个别场景下做一些更精细的控制 此时竟态请求可以帮助我们解决这个问题

Promise.race?

Promise原型下的静态方法，接受一个Promise Array参数，会将最先请求成功的结果返回，其他Promise会被无视.

由此可以引申出，通过竟态请求的包装，我们可以手动去控制请求的取消时机或者超时时间

let p1 = new Promise((resolve) => {
  setTimeout(() => {
    resolve(1);
  }, 1000);
});

// 返回一个Reject的Promise
function cancelAnyTimeoutReq(time) {
  return new Promise((_, reject) => {
    setTimeout(() => {
      reject("超时或取消");
    }, time);
  });
}

// 需要竟态的地方，假设两秒请求没返回就算超时
Promise.race([p1, cancelAnyTimeoutReq(2000)])
  .then((res) => {
    // 请求成功
  })
  .catch((err) => {
    // 这里代表超时了或者请求失败了
  });