一些八股:1.fetch 的理解。2.let、const、var

一、 说说你对 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 的不足:
  1. 不支持进度监控 :与 XMLHttpRequest 不同,Fetch 目前不支持原生的进度事件(如 onprogress),这使得在下载或上传大文件时无法获得进度更新。

  2. 对老旧浏览器的兼容性:Fetch 是现代 API,某些老旧浏览器(如 IE)不支持,需要使用 polyfill 来保证兼容性。

  3. 默认不发送 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 中,声明变量的方式主要有三种:varletconst。每种方式都有其独特的特性和适用场景。下面,我将详细介绍它们之间的区别。

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();