ajax和fetch的区别

ajax请求和fetch请求的区别

ChatGPT 说：

ChatGPT

Ajax（基于 XMLHttpRequest）和 Fetch API 都可以用于在前端进行网络请求，但它们在使用方式和功能上有一些重要区别。下面是它们的详细对比：

1. 语法

• XMLHttpRequest (Ajax) ： XMLHttpRequest 的语法相对繁琐，需要编写更多代码来处理请求、响应和错误。

  javascript
  复制代码
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://api.example.com/data', true);
  xhr.onload = function () {
    if (xhr.status >= 200 && xhr.status < 300) {
      console.log(JSON.parse(xhr.responseText));
    } else {
      console.log('Request failed');
    }
  };
  xhr.onerror = function () {
    console.log('Request error');
  };
  xhr.send();
  

• Fetch： Fetch 的语法更加简洁，基于 Promise，可以直接使用 then 和 catch 来处理异步逻辑，或者使用 async/await。

  javascript
  复制代码
  fetch('https://api.example.com/data')
    .then(response => {
      if (!response.ok) {
        throw new Error('Request failed');
      }
      return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
  

  或者使用 async/await：

  javascript
  复制代码
  async function getData() {
    try {
      const response = await fetch('https://api.example.com/data');
      if (!response.ok) {
        throw new Error('Request failed');
      }
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('Error:', error);
    }
  }
  getData();
  

2. 返回类型

• XMLHttpRequest：

  • responseText 是纯文本格式，默认不做解析，必须手动解析成 JSON。
  • 支持响应类型设置为 document, json, blob 等。

• Fetch：

  • Fetch 的返回值是一个 Promise，返回的 Response 对象提供了多种方法，如 .json()、.text()、.blob()，更方便获取不同格式的响应数据。

3. Promise 支持

• XMLHttpRequest：

  • 基于回调函数，不支持原生 Promise，需要手动封装或使用库（如 axios）来实现 Promise 式请求。

• Fetch：

  • 基于 Promise，可以直接使用 then 和 catch 链式处理异步逻辑。还可以结合 async/await 使用，更符合现代 JavaScript 的异步编程风格