广州网站优化注意事项,wordpress 点击图片放大,ftp服务器上传不了wordpress,网站建设行业地位文章目录 变量提升和函数提升的顺序Event Loop封装 FetchAPI#xff0c;要求超时报错的同时#xff0c;取消执行的 promise#xff08;即不继续执行#xff09;强缓存和协商缓存的区别token可以放在cookie里吗#xff1f; 变量提升和函数提升的顺序
在JavaScript中#… 文章目录 变量提升和函数提升的顺序Event Loop封装 FetchAPI要求超时报错的同时取消执行的 promise即不继续执行强缓存和协商缓存的区别token可以放在cookie里吗 变量提升和函数提升的顺序
在JavaScript中变量提升和函数提升是JavaScript引擎在代码执行之前进行的一种行为。变量提升是指在代码执行之前JavaScript引擎会将变量的声明提升到作用域的顶部而函数提升是指JavaScript引擎会将函数的声明提升到作用域的顶部。
在变量提升中变量的声明会被提升但是赋值操作不会被提升。这意味着在变量被赋值之前它的值是undefined。例如
console.log(x); // 输出 undefined
var x 5;在上面的例子中变量x的声明被提升到作用域的顶部但是赋值操作并没有被提升所以在变量被赋值之前它的值是undefined。
函数提升则是将整个函数的声明提升到作用域的顶部。这意味着可以在函数声明之前调用函数。例如
foo(); // 输出 Hellofunction foo() {console.log(Hello);
}在上面的例子中函数foo的声明被提升到作用域的顶部所以可以在函数声明之前调用函数。
需要注意的是变量提升和函数提升只适用于使用关键字var和function声明的变量和函数。使用let和const声明的变量不会被提升而使用函数表达式声明的函数也不会被提升。
总结起来变量提升和函数提升的顺序是函数提升优先于变量提升而在同一类声明中按照它们在代码中出现的顺序进行提升。
Event Loop
事件循环Event Loop是JavaScript中处理异步操作的一种机制。它负责管理调度和执行异步任务以确保它们按照正确的顺序执行。
事件循环的核心思想是基于一个事件队列Event Queue和一个执行栈Execution Stack。 所有的异步任务都会被放入事件队列中而同步任务则直接放入执行栈中。
当执行栈为空时事件循环会从事件队列中取出一个任务并将其放入执行栈中执行。这个过程会不断重复形成一个循环即事件循环。 事件循环的执行过程如下 执行全局同步代码将同步任务放入执行栈中执行。当遇到异步任务时将其放入事件队列中并继续执行后续的同步任务。当执行栈为空时事件循环会从事件队列中取出一个任务并将其放入执行栈中执行。重复步骤2和步骤3直到事件队列为空。
需要注意的是事件循环是单线程的意味着在同一时间只能执行一个任务。当一个任务正在执行时其他任务需要等待。
常见的异步任务包括定时器setTimeout、setInterval、事件监听addEventListener和网络请求Ajax、fetch等。这些任务会被放入事件队列中等待事件循环的执行。
通过事件循环JavaScript能够处理异步任务避免阻塞主线程提高程序的响应性能。同时事件循环也确保了异步任务按照正确的顺序执行避免了竞争条件和数据不一致的问题。
封装 FetchAPI要求超时报错的同时取消执行的 promise即不继续执行
要封装Fetch API并实现超时报错并取消执行的功能你可以使用Promise.race()和AbortController来实现。下面是一个示例代码
function fetchWithTimeout(url, options, timeout 5000) {const controller new AbortController();const { signal } controller;const timeoutPromise new Promise((_, reject) {setTimeout(() {controller.abort();reject(new Error(请求超时));}, timeout);});const fetchPromise fetch(url, { ...options, signal });return Promise.race([fetchPromise, timeoutPromise]);
}// 使用示例
fetchWithTimeout(https://api.example.com/data, { method: GET }).then(response response.json()).then(data console.log(data)).catch(error console.error(error));在上面的示例中我们定义了一个名为fetchWithTimeout的函数它接受三个参数url表示要请求的URLoptions表示请求的选项timeout表示超时时间默认为5000毫秒。
在函数内部我们创建了一个AbortController对象和一个signal对象用于取消请求。然后我们创建了一个timeoutPromise它会在指定的超时时间后调用controller.abort()来取消请求并抛出一个超时错误。
接下来我们使用fetch函数发起请求并传入signal作为请求的信号。最后我们使用Promise.race()来同时等待fetchPromise和timeoutPromise并返回最先完成的Promise。
这样如果请求在超时时间内完成那么fetchPromise会先完成返回请求的结果。如果请求超时那么timeoutPromise会先完成抛出一个超时错误。
你可以根据需要调整超时时间和其他请求选项。同时记得在使用fetchWithTimeout函数时使用.catch()来捕获错误并处理取消执行的情况。
强缓存和协商缓存的区别
强缓存和协商缓存是用于在客户端和服务器之间进行缓存控制的两种机制。它们有以下区别 强缓存 当客户端请求资源时如果该资源的缓存标识符如Cache-Control或Expires满足条件客户端将直接从本地缓存中获取资源而不向服务器发送请求。强缓存的优点是可以减少服务器的负载加快资源加载速度。但缺点是如果资源在客户端缓存过期之前有更新客户端无法得知仍然使用旧版本。 协商缓存 当客户端请求资源时如果该资源的缓存标识符满足条件客户端会发送一个请求到服务器验证该资源是否仍然有效。服务器会根据资源的缓存标识符如ETag或Last-Modified进行验证判断资源是否已经改变。如果资源没有改变服务器将返回一个304 Not Modified状态码并告诉客户端继续使用本地缓存。如果资源已经改变服务器将返回新的资源。 区别 强缓存是根据缓存标识符直接使用本地缓存不向服务器发送请求而协商缓存需要向服务器发送请求进行验证。强缓存相对来说比较快因为它减少了网络请求的次数而协商缓存需要与服务器进行通信。强缓存的缺点是不能检测资源的更新情况只能依赖资源的缓存过期时间来判断可能导致使用过期的资源。协商缓存通过与服务器进行验证可以获取到最新的资源但会增加一次额外的网络请求。
在实际应用中可以综合使用强缓存和协商缓存来控制资源的缓存以达到更好的性能和用户体验。
token可以放在cookie里吗 摘抄不建议因为安全问题。因为存在CSRF跨站请求伪造风险攻击者可以冒用Cookie中的信息来发送恶意请求。 为了解决CSRF问题可以设置同源检测Origin和Referer认证也可以设置Samesite为Strict。 可以将一个令牌token存储在一个cookie中。Cookie是浏览器保存在用户设备上的一小段文本信息这些信息会在每次浏览器发送请求时通过HTTP头部自动发送到服务器。 将令牌存储在Cookie中具有一些优点 它对于客户端来说是透明的无需手动添加头部信息。Cookie存储在浏览器中与用户会话相关联因此在不同的页面和请求中都可以使用。Cookie具有过期时间的设置可以控制令牌的有效期。 然而需要注意的是将令牌存储在Cookie中也存在一些安全风险 客户端可能对Cookie进行修改、删除或伪造从而引发安全漏洞。由于Cookie存储在用户设备上可能会被其他恶意脚本或跨站脚本攻击获取到。
因此在使用Cookie存储令牌时需要采取一些安全措施如使用HTTPS协议进行通信设置HttpOnly和Secure标记来限制脚本访问以及定期更新和验证令牌等。
