12、二面：手写封装fetch，超时可以重试，有重试次数等限制 · 大厂前端面试真题

>[danger]二面：手写封装fetch，超时可以重试，有重试次数等限制下面是一个简单的手写封装 fetch 的示例代码，其中包括了超时重试和重试次数限制的功能： ```javascript function customFetch(url, options, retryTimes) { const DEFAULT_RETRY_TIMES = 3; const DEFAULT_TIMEOUT = 5000; retryTimes = retryTimes || DEFAULT_RETRY_TIMES; return new Promise((resolve, reject) => { const controller = new AbortController(); const signal = controller.signal; const timeoutId = setTimeout(() => { controller.abort(); }, DEFAULT_TIMEOUT); fetch(url, { ...options, signal }) .then(response => { clearTimeout(timeoutId); resolve(response); }) .catch(error => { if (retryTimes > 0) { console.log(`Request failed, retrying... (${retryTimes} attempts left)`); return customFetch(url, options, retryTimes - 1); } else { clearTimeout(timeoutId); reject(error); } }); }); } // 调用示例 customFetch('https://example.com/api/data', { method: 'GET' }, 3) .then(response => { // 对返回的 response 进行处理 }) .catch(error => { // 处理请求失败的情况 }); ``` 在这个示例中，`customFetch` 函数接受三个参数：URL、选项对象和重试次数限制。它返回一个 Promise，在内部使用了 `fetch` API 来发起网络请求，并实现了超时重试和重试次数限制的逻辑。