前端 JavaScript 基础面试题, ajax,axios,fetch 的区别是什么?

QA

Step 1

Q:: ajax、axios、fetch 的区别是什么？

A:: Ajax、Axios 和 Fetch 都是用于在前端进行 HTTP 请求的技术。Ajax（Asynchronous JavaScript and XML）是一种使用 XMLHttpRequest 对象来与服务器交换数据的方法，支持异步请求。Axios 是一个基于 Promise 的 HTTP 库，具有更简单的 API 和更强大的功能，如自动转换 JSON 数据、处理请求和响应的拦截器等。Fetch 是现代浏览器提供的原生 API，也是基于 Promise 的，具有简洁的语法，但不如 Axios 具备那么多的高级功能，如默认的超时处理和请求拦截器。

Step 2

Q:: 如何使用 fetch 发起一个 GET 请求？

A:: 可以通过 fetch API 发送 GET 请求如下：

 
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Step 3

Q:: 如何在 axios 中处理错误？

A:: 在 axios 中可以通过 .catch 方法来捕获错误，或者在请求拦截器中处理全局错误。

 
axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

此外，还可以设置全局错误处理：

 
axios.interceptors.response.use(
  response => response,
  error => {
    console.error('Global Error Handler:', error);
    return Promise.reject(error);
  }
);

Step 4

Q:: 如何在 fetch 请求中发送 JSON 数据？

A:: 可以通过 fetch API 发送 JSON 数据如下：

 
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Step 5

Q:: 如何在 axios 中设置请求头？

A:: 可以在 axios 请求配置对象中设置请求头：

 
axios.post('https://api.example.com/data', {
  key: 'value'
}, {
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

用途

面试这些内容是为了评估候选人对前端 HTTP 请求的掌握情况，这在实际开发中是非常常见且重要的操作。前端与后端的数据交互、API 的调用、页面数据的动态更新等都依赖于这些技术。熟练掌握这些技术可以确保前端开发人员能够高效地与服务器进行通信，并处理各种数据交互需求。\n

相关问题

🦆

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

CORS（Cross-Origin Resource Sharing）是一种机制，通过设置 HTTP 头来允许或限制不同源的 Web 应用访问服务器上的资源。解决跨域问题的方法包括 JSONP、代理服务器、CORS 头配置等。在服务器端，可以通过设置 Access-Control-Allow-Origin 头来允许特定源访问资源。

🦆

Promise 和 asyncawait 的区别是什么?▷

Promise 是一种处理异步操作的方式，提供了 .then 和 .catch 方法。async/await 是基于 Promise 的语法糖，使异步代码看起来更像同步代码，使用 await 关键字等待 Promise 的结果，使代码更简洁易读。

🦆

如何在 JavaScript 中处理并发请求?▷

可以使用 Promise.all 来并发处理多个请求，确保所有请求完成后再执行后续操作。例如：

 
Promise.all([fetch('/api/1'), fetch('/api/2')])
  .then(responses => Promise.all(responses.map(response => response.json())))
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

🦆

如何取消一个正在进行的 HTTP 请求?▷

在 axios 中，可以使用 CancelToken 来取消请求。例如：

 
const source = axios.CancelToken.source();
axios.get('/api/data', { cancelToken: source.token })
  .then(response => console.log(response))
  .catch(thrown => {
    if (axios.isCancel(thrown)) {
      console.log('Request canceled', thrown.message);
    } else {
      console.error('Error:', thrown);
    }
  });
// 取消请求
source.cancel('Operation canceled by the user.');

在 fetch 中，取消请求相对复杂，需要使用 AbortController：

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

🦆

什么是 HTTP 缓存,如何利用 HTTP 头优化缓存?▷

HTTP 缓存是一种通过缓存 HTTP 响应来减少服务器负载、加快页面加载速度的方法。可以通过设置 Cache-Control、Expires、ETag 等 HTTP 头来优化缓存策略。例如：Cache-Control: max-age=3600 表示资源可以被缓存 1 小时。使用 ETag 可以进行条件请求，只有资源发生改变时才重新下载。

如何获取安全的 undefined 值为什么 JavaScript 函数的 arguments 参数是类数组而不是数组如何遍历类数组