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

Mr.Zzzzzzz

于 2024-09-16 03:14:36 发布

点赞数

一、说说你对 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();