fetch请求超时与关闭1.使用Promise.race实现超时返回结果。Promise.race能将多个Promise

1.使用Promise.race实现超时返回结果。Promise.race能将多个Promise对象包装成一个新的Promise对象，其中任意一个Promise实例率先返回状态Promise.race实例的状态就会跟着改变。下面是阮一峰大大es6中的一个例子：

const p = Promise.race([
  fetch('/resource-that-may-take-a-while'),
  new Promise(function (resolve, reject) {
    setTimeout(() => reject(new Error('request timeout')), 5000)
  })
]);

p
.then(console.log)
.catch(console.error);

上面代码中，如果 5 秒之内fetch方法无法返回结果，变量p的状态就会变为rejected，从而触发catch方法指定的回调函数。但是接口还是会请求。接下来我们需要终止这些不必要的请求。

2.通过AbortController来终止请求。不谦容iE浏览器

AbortController接口代表一个控制器对象，允许你在需要时中止一个或多个Web(网络)请求。当一个 fetch request 初始化，我们把 AbortSignal 作为一个选项传递到到请求对象（如下 {signal}）。这将信号和控制器与获取请求相关联然后允许我们通过调用AbortController.abort()中止请求：

var controller = new AbortController();
var signal = controller.signal;
var p1 = Promise.race([
  fetch('https://cnodejs.org/api/v1/topics',{signal}),
  new Promise(function (resolve, reject) {
    setTimeout(() => {reject(controller.abort())}, 100)
  })
]);

p1
.then(console.log)
.catch(console.error);

通过Promise.race和AbortController就实现请求超时处理和请求关闭。