前端经典面试题合集, JavaScript 中如何中止网络请求?

QA

Step 1

Q:: 如何在JavaScript中中止一个网络请求？

A:: 在JavaScript中可以通过使用AbortController来中止一个网络请求。首先创建一个AbortController实例，然后在fetch请求的options中传递该控制器的signal属性。通过调用AbortController实例的abort方法可以中止请求。示例代码如下：

 
const controller = new AbortController();
const signal = controller.signal;
 
fetch('https://example.com/api', { signal })
  .then(response => response.json())
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Fetch aborted');
    } else {
      console.error('Fetch error:', error);
    }
  });
 
// 取消请求
controller.abort();

Step 2

Q:: 什么是AbortController，它是如何工作的？

A:: AbortController是一个JavaScript内置对象，用于控制和取消异步操作。它主要用于fetch API。AbortController对象包含一个AbortSignal对象，通过该信号对象可以监听中止事件。当AbortController的abort方法被调用时，所有关联的fetch请求会被中止，并且会触发相应的错误处理逻辑。

Step 3

Q:: 在什么情况下需要中止网络请求？

A:: 中止网络请求在多种情况下都很有用，比如： 1. 用户导航到新页面时，需要取消旧页面的请求。 2. 用户输入过程中发起的自动补全请求，当用户继续输入时，需要取消之前的请求。 3. 优化资源消耗，避免处理不必要的请求。 4. 降低服务器负载，减少不必要的请求处理。

Step 4

Q:: fetch API 和 XMLHttpRequest 有什么区别？

A:: fetch API是现代浏览器提供的新的HTTP请求方式，相较于XMLHttpRequest，它更简洁且基于Promise，提供更好的异步编程体验。fetch API不支持某些旧版浏览器，而XMLHttpRequest有更广泛的兼容性。fetch API不能自动发送或接收cookies，而需要手动配置credentials选项。

用途

面试这个内容是因为在实际开发中，处理网络请求是前端开发的重要部分。了解如何中止请求对提升应用性能和用户体验非常重要。中止网络请求可以防止资源浪费，特别是在用户操作频繁或网络条件不稳定的情况下。理解这些概念有助于开发者编写更高效和健壮的代码。\n

相关问题

🦆

如何处理fetch请求的错误?▷

可以在fetch请求后使用.catch方法处理错误，如网络失败或服务器返回错误响应。可以根据error对象的属性进行不同类型的错误处理。示例代码：

 
fetch('https://example.com/api')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

🦆

如何处理多个并发请求?▷

可以使用Promise.all方法来处理多个并发请求。Promise.all接受一个包含多个Promise的数组，当所有Promise都解决后返回一个新的Promise。示例代码：

 
const request1 = fetch('https://example.com/api1');
const request2 = fetch('https://example.com/api2');
 
Promise.all([request1, request2])
  .then(responses => Promise.all(responses.map(response => response.json())))
  .then(data => {
    console.log('Data from both requests:', data);
  })
  .catch(error => {
    console.error('Error with one of the requests:', error);
  });

🦆

什么是CORS,如何解决跨域请求问题?▷

CORS（跨域资源共享）是一种机制，它使用额外的HTTP头来告诉浏览器允许Web应用在一个域上访问另一个域的资源。要解决跨域请求问题，可以在服务器端设置适当的CORS头，或者使用代理服务器来转发请求。示例代码（Express服务器中设置CORS头）：

 
const express = require('express');
const app = express();
 
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET,POST');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});
 
app.listen(3000, () => {
  console.log('Server running on port 3000');
});

介绍一下JS中setTimeout的运行机制？git pull 和 git fetch 命令分别有什么作用二者有什么区别