Sunny-117 / js-challenges

✨✨✨ Challenge your JavaScript programming limits step by step

Home Page:https://juejin.cn/column/7244788137410560055

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

请求5s未完成就终止

Sunny-117 opened this issue · comments

commented
const abort = new AbortController();
let res = null;
fetch(url, {
  signal: abort.signal
}).then(_res => {
  res = _res;
})

setTimeout(() => {
  if (!res) abort.abort();
}, 5000);
const funWait = (call, timeout = 5000) => {
  let wait = new Promise((resolve, reject) => {
    setTimeout(() => {
      reject('请求超时')
    }, timeout)
  })
  return Promise.race([call(), wait])
}
const t = () => new Promise(resolve => setTimeout(resolve, 4000))
const t2 = () => new Promise(resolve => setTimeout(resolve, 6000))
funWait(t).then(res => {
  console.log("t1 resolve")
}).catch(err => {
  console.log("t1 timeout")
})
funWait(t2).then(res => {
  console.log("t2 resolve")
}).catch(err => {
  console.log("t2 timeout", err)
})
const abortPromise = (promise, timeout) => {
    return new Promise((resolve, reject) => {
        const timer = setTimeout(() => {
            reject('abort promise')
        }, timeout)
        promise
            .then((res) => {
                resolve(res)
            })
            .catch((err) => {
                reject(err)
            })
            .finally(() => {
                clearTimeout(timer)
            })
    })
}

// test case
const promiseA = new Promise((resolve) => {
    setTimeout(() => {
        resolve('success')
    }, 6000)
})
abortPromise(promiseA, 5000)
    .then((res) => {
        console.log(res)
    })
    .catch((err) => {
        console.log(err)
    })

function requestAbort() {
return new Promise((rs, rj) => {
setTimeout(
() => rj('请求失败')
, 5000);
})
}

function request(t) {
return new Promise((rs, rj) => {
setTimeout(
() => rs('请求成功')
, t);
})
}

function requestWrap(fn) {
return function(...args) {
return Promise.race([requestAbort() , fn(...args)]);
}
}

requestWrap(request)(6000).then((data) => {
console.log(data);
});