No115.精选前端面试题，享受每天的挑战和学习

news2024/10/6 8:33:28

在这里插入图片描述

文章目录

- 变量提升和函数提升的顺序
- Event Loop
- 封装 FetchAPI，要求超时报错的同时，取消执行的 promise（即不继续执行）
- 强缓存和协商缓存的区别
- token可以放在cookie里吗？

变量提升和函数提升的顺序

在JavaScript中，变量提升和函数提升是JavaScript引擎在代码执行之前进行的一种行为。变量提升是指在代码执行之前，JavaScript引擎会将变量的声明提升到作用域的顶部，而函数提升是指JavaScript引擎会将函数的声明提升到作用域的顶部。

在变量提升中，变量的声明会被提升，但是赋值操作不会被提升。这意味着在变量被赋值之前，它的值是undefined。例如：

console.log(x); // 输出 undefined
var x = 5;

在上面的例子中，变量x的声明被提升到作用域的顶部，但是赋值操作并没有被提升，所以在变量被赋值之前，它的值是undefined。

函数提升则是将整个函数的声明提升到作用域的顶部。这意味着可以在函数声明之前调用函数。例如：

foo(); // 输出 "Hello"

function 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表示要请求的URL，options表示请求的选项，timeout表示超时时间（默认为5000毫秒）。

在函数内部，我们创建了一个AbortController对象和一个signal对象，用于取消请求。然后，我们创建了一个timeoutPromise，它会在指定的超时时间后调用controller.abort()来取消请求，并抛出一个超时错误。

接下来，我们使用fetch函数发起请求，并传入signal作为请求的信号。最后，我们使用Promise.race()来同时等待fetchPromise和timeoutPromise，并返回最先完成的Promise。

这样，如果请求在超时时间内完成，那么fetchPromise会先完成，返回请求的结果。如果请求超时，那么timeoutPromise会先完成，抛出一个超时错误。

你可以根据需要调整超时时间和其他请求选项。同时，记得在使用fetchWithTimeout函数时，使用.catch()来捕获错误并处理取消执行的情况。

强缓存和协商缓存的区别

强缓存和协商缓存是用于在客户端和服务器之间进行缓存控制的两种机制。它们有以下区别：

强缓存：

当客户端请求资源时，如果该资源的缓存标识符（如Cache-Control或Expires）满足条件，客户端将直接从本地缓存中获取资源，而不向服务器发送请求。
强缓存的优点是可以减少服务器的负载，加快资源加载速度。
但缺点是如果资源在客户端缓存过期之前有更新，客户端无法得知，仍然使用旧版本。