Fetch设置超时请求

promise + fetch + AbortController + setTimeOut

这是一段正常的fetch请求

js 复制代码

fetch('www.baidu.com',{})
  .then(res=>res.json())
  .then(console.log(res) // 打印返回结果
  .catch(...) // 捕获错误信息

这段代码实现: 返回成功打印, 返回失败捕获, 无限制超时时间.

假设限制超时间为3000ms, 需要怎么写呢?

尝试一下使用setTimeOut

在n个时间后执行

js 复制代码

let timeoutPromise = (timeout) => {  // 模拟返回一个promise(超时版本)
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(new Response("timeout", { status: 504, statusText: "timeout " }));
        }, timeout);
    });
}

这段代码的执行, 我们可以收到一个n时间后的超时返回.

什么是AbortController

AbortController 接口表示一个控制器对象，允许你根据需要中止一个或多个 Web 请求。

js 复制代码

// 构建一个AbortController
const AC = new AbortController();
const signal = AC.signal; // signal注入请求(例如fetch, 可以终止请求抛出error)

fetch('www.baidu.com',{signal: signal})
  .then(res=>res.json())
  .then(res=>{
    console.log(res);
  })
  .catch(err=>{
    console.log("出错了!", err);
  })
// 例如用一个按钮来终止, 把网络速度调整为slow 3G
abortBtn.addEventListener("click", () => {
  if (controller) {
    AC.abort();
    console.log("中止下载");
  }
});
// 也可以用setTimeOut
setTimeOut(()=>{
  AC.abort();
  alert('终止请求');
}, 100)

实现请求的超时设置

两个请求相互竞争, 谁先完成谁先返回, 真的请求和假(模拟)的请求, 模拟一个八秒就立刻返回的请求, 真的请求如果不能在八秒内请求成功, 那么假的就会立刻返回. 可以想到使用Promise.race方法. 请求成功立刻终止另一个请求AbortController.

js 复制代码

// 公用的AbortController
const AC = new AbortController();
const signal = AC.signal;

// 我们要在100ms内请求百度网址成功
function getBaidu() {
  // 浅浅将signal注入其中
  return fetch('https://www.baidu.com', {signal});
}

// 做一个定时resolve的promise用于和真请求竞争
const timeOutPromise = new Promise((resolve, reject)=>{
  setTimeout(()=>{
    resolve({ status: 504, statusText: "timeout " });
    AC.abort(); // 百度不给我们响应, 我们就终止请求
  }, 100)  // 100ms内百度不resolve我们先resolve
})

// 开始请求(竞争)
Promise.race([timeOutPromise, getBaidu()])
  .then(res=>{
    console.log(res)
  })
  .cathch(err=>{
    console.log(err)
  })