首页 > 极客资料 博客日记
一些八股:1.fetch 的理解。2.let、const、var
2024-08-05 20:00:06极客资料围观25次
一、 说说你对 Fetch 的理解,它有哪些优点和不足?
Fetch API 是现代 JavaScript 中用于进行网络请求的接口,旨在替代传统的 XMLHttpRequest。它提供了一种更简单、更灵活的方法来获取资源和与服务器进行交互。下面,我将详细介绍 Fetch 的优点和不足。
Fetch 的优点:
语法简洁直观:Fetch 使用基于 Promise 的机制,这使得代码更加简洁易读。相比于 XMLHttpRequest,它避免了回调地狱(callback hell),大大提高了代码的可维护性。
fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error));
更好的可读性和可维护性:由于 Fetch 是基于 Promise 的,结合 async/await 语法可以使异步代码看起来像同步代码一样,进一步提高代码的可读性。
async function fetchData() { try { const response = await fetch('https://api.example.com/data'); const data = await response.json(); console.log(data); } catch (error) { console.error('Error:', error); } }
更强的灵活性:Fetch 提供了一组丰富的选项(options),可以轻松设置请求方法、头信息、请求体等。
fetch('https://api.example.com/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'value' }) });
Stream 处理:Fetch API 支持对响应体的流式处理,可以逐步读取响应数据,适用于处理大文件或实时数据。
fetch('https://api.example.com/data') .then(response => { const reader = response.body.getReader(); // 逐步处理数据 });
Fetch 的不足:
-
不支持进度监控:与 XMLHttpRequest 不同,Fetch 目前不支持原生的进度事件(如
onprogress
),这使得在下载或上传大文件时无法获得进度更新。 -
对老旧浏览器的兼容性:Fetch 是现代 API,某些老旧浏览器(如 IE)不支持,需要使用 polyfill 来保证兼容性。
-
默认不发送 Cookies:Fetch 默认不会发送 cookies,需要手动设置
credentials
选项。
fetch('https://api.example.com/data', { credentials: 'include' });
错误处理机制:Fetch 对于网络错误和 HTTP 错误(如 404 或 500)的处理需要特别注意,因为只有网络错误会触发 catch
,而 HTTP 错误仍会被视为成功的请求。
fetch('https://api.example.com/data') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .catch(error => console.error('Error:', error));
二、理解 JavaScript 中的 let、const 和 var
在 JavaScript 中,声明变量的方式主要有三种:var
、let
和 const
。每种方式都有其独特的特性和适用场景。下面,我将详细介绍它们之间的区别。
1. var
var
是最早在 JavaScript 中引入的变量声明方式。它有以下几个特点:
- 函数作用域:
var
声明的变量在函数内是局部变量,在函数外是全局变量。 - 变量提升:
var
声明的变量会被提升到函数或全局作用域的顶部,但变量初始化不会提升。 - 可重复声明:同一作用域内,
var
声明的变量可以重复声明。
function example() { console.log(a); // undefined var a = 10; console.log(a); // 10 } example();
2. let
let
是在 ES6 中引入的,用于声明块级作用域的变量。它有以下几个特点:
- 块级作用域:
let
声明的变量在块级作用域内有效,不会污染全局作用域。 - 无变量提升:
let
声明的变量不会被提升,必须先声明后使用。 - 不可重复声明:同一作用域内,
let
声明的变量不能重复声明。
function example() { if (true) { let a = 10; console.log(a); // 10 } console.log(a); // ReferenceError: a is not defined } example();
3. const
const
也是在 ES6 中引入的,用于声明常量。它有以下几个特点:
- 块级作用域:
const
声明的变量在块级作用域内有效。 - 不可变性:
const
声明的变量必须在声明时初始化,且初始化后不可重新赋值(但对于对象和数组,其内部值是可变的)。 - 不可重复声明:同一作用域内,
const
声明的变量不能重复声明。
function example() { const a = 10; a = 20; // TypeError: Assignment to constant variable. const obj = { key: 'value' }; obj.key = 'new value'; // 这是允许的 console.log(obj.key); // 'new value' } example();
标签:
上一篇:代码随想录Day5
下一篇:小厂也是厂,3000我也干
相关文章
最新发布
- Nuxt.js 应用中的 prerender:routes 事件钩子详解
- 【问题解决】Tomcat由低于8版本升级到高版本使用Tomcat自带连接池报错无法找到表空间的问题
- 【FAQ】HarmonyOS SDK 闭源开放能力 —Vision Kit
- 六、Spring Boot集成Spring Security之前后分离认证流程最佳方案
- 《JVM第7课》堆区
- .NET 8 高性能跨平台图像处理库 ImageSharp
- 还在为慢速数据传输苦恼?Linux 零拷贝技术来帮你!
- 刚毕业,去做边缘业务,还有救吗?
- 如何避免 HttpClient 丢失请求头:通过 HttpRequestMessage 解决并优化
- 让性能提升56%的Vue3.5响应式重构之“版本计数”