前端 JavaScript 进阶面试题, 说说你对 fetch 的理解,它有哪些优点和不足?

QA

Step 1

Q:: 说说你对 fetch 的理解，它有哪些优点和不足？

A:: {"答案": "fetch 是现代浏览器中提供的一种用于进行 HTTP 请求的 API，取代了旧的 XMLHttpRequest。它的优点包括：1. 语法更加简洁和现代化，使用 Promise 使得处理异步请求更加方便；2. 支持更多的特性，如流式处理、更多的 HTTP 请求方法（如 PATCH）、更好的错误处理等。缺点包括：1. 不支持取消请求，需要配合 AbortController 使用；2. 错误处理较为复杂，需要手动检查 response.ok；3. 浏览器兼容性问题，虽然支持范围较广，但在一些旧版浏览器中仍需使用 polyfill。"}

Step 2

Q:: fetch API 的基本使用方法是什么？

A:: {"答案": "fetch API 的基本使用方法是调用 fetch(url, options)，返回一个 Promise 对象。可以通过 then 方法处理响应结果。例如：fetch('https://api.example.com/data').then(response => { if (response.ok) { return response.json(); } else { throw new Error('Network response was not ok.'); } }).then(data => console.log(data)).catch(error => console.error('There has been a problem with your fetch operation:', error));"}

Step 3

Q:: 如何使用 fetch API 进行 POST 请求？

A:: {"答案": "使用 fetch API 进行 POST 请求时，需要在 options 参数中指定 method 为 'POST'，并在 headers 中设置 'Content-Type'，同时提供 body 参数。示例代码：fetch('https://api.example.com/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key1: 'value1', key2: 'value2' }) }).then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error:', error));"}

Step 4

Q:: 如何处理 fetch 请求的超时情况？

A:: {"答案": "fetch 本身不支持超时机制，需要结合 AbortController 实现。可以创建一个 AbortController 实例，并在 fetch 选项中传入 signal 参数，同时使用 setTimeout 实现超时控制。示例代码：const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), 5000); fetch('https://api.example.com/data', { signal: controller.signal }).then(response => response.json()).then(data => console.log(data)).catch(error => { if (error.name === 'AbortError') { console.error('Fetch request timed out'); } else { console.error('Fetch error:', error); } });"}

Step 5

Q:: 如何使用 fetch 处理二进制数据？

A:: {"答案": "fetch 可以处理二进制数据，例如图片、文件等。可以使用 response.arrayBuffer()、response.blob() 方法获取二进制数据。例如获取图片数据：fetch('https://example.com/image.jpg').then(response => response.blob()).then(blob => { const img = document.createElement('img'); img.src = URL.createObjectURL(blob); document.body.appendChild(img); }).catch(error => console.error('Fetch error:', error));"}

用途

面试关于 fetch 的问题是为了评估候选人对现代前端开发技术的理解和掌握程度。在实际生产环境中，fetch 广泛应用于与后端服务器的交互，如获取数据、提交表单、上传文件等。掌握 fetch API 有助于提高开发效率和代码的可读性、维护性。\n

相关问题

🦆

如何处理 fetch API 的跨域请求问题?▷

{"答案": "跨域请求问题通常需要后端配置 CORS（跨源资源共享）头。在前端，可以使用 fetch 的 credentials 选项传递 cookie 或者使用代理服务器转发请求。例如：fetch('https://api.example.com/data', { credentials: 'include' })。"}

🦆

与 XMLHttpRequest 相比,fetch 有哪些不同和改进?▷

{"答案": "fetch 与 XMLHttpRequest 相比，提供了更现代化、更简洁的 API。fetch 使用 Promise 进行异步处理，避免了回调地狱。fetch 支持更灵活的配置和更广泛的 HTTP 请求方法。此外，fetch 提供了更好的流式处理和错误处理机制。"}

🦆

如何使用 fetch API 处理大文件上传?▷

{"答案": "处理大文件上传可以结合 fetch API 和 FormData 对象。可以将文件数据封装在 FormData 对象中，并通过 fetch 进行 POST 请求。例如：const formData = new FormData(); formData.append('file', fileInput.files[0]); fetch('https://api.example.com/upload', { method: 'POST', body: formData }).then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Upload error:', error));"}

🦆

在 fetch 中如何处理重定向?▷

{"答案": "fetch 默认会自动处理重定向，但可以通过配置选项进行控制。例如，可以设置 redirect 选项为 'follow'（默认）、'manual' 或 'error' 来指定重定向策略。示例代码：fetch('https://api.example.com/data', { redirect: 'manual' }).then(response => { if (response.type === 'opaqueredirect') { console.error('Redirect detected'); } else { return response.json(); } }).then(data => console.log(data)).catch(error => console.error('Fetch error:', error));"}

🦆

fetch API 是否支持流式处理Streaming?▷

{"答案": "fetch API 支持流式处理，通过 response.body 获取 ReadableStream 对象，然后可以逐步读取数据。示例代码：fetch('https://api.example.com/stream').then(response => { const reader = response.body.getReader(); const stream = new ReadableStream({ start(controller) { function push() { reader.read().then(({ done, value }) => { if (done) { controller.close(); return; } controller.enqueue(value); push(); }); } push(); } }); return new Response(stream); }).then(response => response.text()).then(text => console.log(text)).catch(error => console.error('Fetch stream error:', error));"}

说说你对 Promise 的理解 JavaScript 的原型链指向什么