JavaScript前端面试题——fetch

什么是fetch?

fetch:fetch是浏览器内置的api,用于发送网络请求

ajax&axios&fetch的关系

ajaxajax 是一种基于原生 JavaScript 的异步请求技术。它使用 XMLHttpRequest 对象来发送请求和接收响应。

axiosaxios 是一个基于 Promise 的 HTTP 客户端,可以在浏览器和 Node.js 中使用。它提供了更高级别的封装,使发送请求和处理响应更加简单和灵活。

fetchfetch 是浏览器内置的 API,用于发送网络请求。它提供了一种现代化、基于 Promise 的方式来进行网络通信。用法和axios类似,但相比于 axios,它的功能和封装级别更为简单。

我之前一直以为AJAX和axios是同一个东西,现在才发现并不是

axios是一个独立的第三方库,用法简单,功能强大,所以开发时常用的是axios

而学习AJAX则是帮我们去理解请求的底层原理,可以说:axios内部封装了AJAX

而fetch的应用场景呢?——基本上只在面试中会遇到哈哈哈哈哈哈哈哈。但如果一个项目中只用到了一两个请求,这时候把axios引进来就有点小题大做了,所以这时候也可以考虑用fetch

fetch核心语法

mdn官网:Window:fetch() 方法 - Web API | MDN (mozilla.org)

Window 接口的 fetch() 方法用于发起获取资源的请求,它会返回一个会在请求响应后兑现的 promise -> 返回的是promise对象,所以可以用.then,可以await,async。通常需要用await来等待返回的promise对象

该 promise 会兑现一个表示请求响应的 Response 对象 -> Response - Web API | MDN (mozilla.org)

在请求返回的response对象中,比较常用的属性是status,也就是响应状态码

Response 实现了 Body 接口,所以以下方法同样可用,比较常用的是.json()方法,该

### 经典且具挑战性的前端试题 #### HTTP 请求基础配置 HTTP 客户端应当支持常见的请求方法,如 `GET`、`POST`、PUT 和 DELETE 等。这些客户端应该具备设置请求 URL、请求头以及请求参数的能力[^1]。 ```javascript // 使用 fetch API 发起不同类型的 HTTP 请求 fetch('https://api.example.com/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'value' }) }) .then(response => response.json()) .catch(error => console.error('Error:', error)); ``` #### 数据处理能力 对于成功的响应,应能解析并格式化返回的数据;而对于失败的响应,则需妥善管理错误状况,并向用户提供清晰的信息反馈。 ```javascript function handleResponse(response) { if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); return response.json().then(data => ({ success: true, data })).catch(parseError => ({ success: false, message: parseError.message || "Failed to parse the server's response." })); } ``` #### 并发控制与缓存策略 当面对多请求场景时,合理的并发限制有助于优化性能体验。同时,依据具体应用场景合理运用缓存技术可显著提升数据读取速度和用户体验。 ```javascript class RequestQueue { constructor(maxConcurrentRequests = 5) { this.queue = []; this.maxConcurrentRequests = maxConcurrentRequests; this.activeCount = 0; } add(requestPromise) { const wrappedRequest = () => requestPromise.finally(() => { --this.activeCount; processNext(); }); this.queue.push(wrappedRequest); function processNext() { while (queue.length && activeCount < maxConcurrentRequests) { ++activeCount; queue.shift()(); } } if (this.activeCount < this.maxConcurrentRequests) { processNext(); } } } // 缓存实现方式之一:使用 Map 存储已加载过的资源 const cacheStore = new Map(); async function getCachedOrFetch(url) { let cachedData = cacheStore.get(url); if(cachedData !== undefined){ return Promise.resolve(cachedData); }else{ try { const res = await fetch(url); cachedData = await res.json(); // 或者其他形式的数据转换逻辑 cacheStore.set(url, cachedData); return cachedData; } catch(e) { console.warn(`Cache miss and failed fetching from network`, e); throw e; } } } ``` #### 模板字符串的应用 ES6 中引入了模板字符串这一特性,使得开发者可以通过反引号 `` ` `` 来创建包含变量插值在内的复杂字符串结构,这不仅简化了代码编写过程中的字符串拼接操作,还增强了代码的可读性和维护性[^2]。 ```javascript const user = { name: 'Alice', age: 30 }; console.log(`User info: Name=${user.name}, Age=${user.age}.`); ``` #### CSS 属性理解——line-height `line-height` 是用来指定行间距离的一个重要CSS属性,在未显式设定元素高度的情况下,实际渲染出来的高度取决于该属性而非文本本身的内容尺寸。通过适当调整此属性还可以轻松达成单行内文字垂直居中的效果[^3]。 ```css .container { line-height: 48px; /* 设置为期望的高度 */ height: 48px; text-align: center; } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值